Home arrow Style Sheets arrow Page 5 - Learn CSS, Selectors, part 2
STYLE SHEETS

Learn CSS, Selectors, part 2


In the first article covering selectors, we discussed the CSS group, universal, class and ID selectors. In this article, we continue our discussion of selectors with various attribute selectors.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 22
June 13, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, Selectors, part 2
  2. · The Attribute Selector
  3. · Specific-Value Attribute Selector
  4. · The Specific-Values Attribute Selector
  5. · The Begin With Specific-Value Attribute Selector
  6. · The End With Specific-Value Attribute Selector
  7. · The Contain-Value Attribute Selector

print this article
SEARCH DEVARTICLES

Learn CSS, Selectors, part 2 - The Begin With Specific-Value Attribute Selector
(Page 5 of 7 )

Introduced by the CSS 3 Specifications (at this link: http://www.w3.org/TR/css3-selectors/#attribute-selectors), the begin with specific-value attribute selector applies the rule if the attribute's value begins with a specific string. It can be very handy. Suppose we need all the links to external websites to have a red background and white text colors, and the internal website links (those links to another web page within the website) will have a greenyellow background and blue text color. We can use the syntax of the begin with specific-value attribute selector to check whether the href attribute of the anchor element begins with "http://www." Let's take a look at the example and the syntax:

a
{
background-color: greenyellow;
color: blue;
}
a[href^="http://www"]
{
background-color: red;
color: white;
}
p[lang|="en"]
{
color: blue;
}
 

Here's the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Selectors.css" type="text/css">
<title>CSS Selectors</title>
</head>
<body>
<p>
<a href="Home.html">Home</a>
</p>
<p lang="en-us">You can use CSS with markup languages like HTML, XHTML and XML. All
those markup languages and also CSS has Specifications as the <a
href="http://www.w3.org">W3C website</a>
</p>
<p>The <a href="http://www.w3.org" target="_blank">W3C website </a>
contains specifications for web standards and it's
very useful for web designers, developers and software architectures to
navigate this website. For example, you have the CSS 2.1 Specifications
and the XHTML 1.0 Specifications discussing everything from A to Z about
the technology
</p>
</body>
</html>

And here is the result: 
 

As you can see, we have two styles for anchor elements inside the Web page. I have added another anchor to the Web page to take us to the home page of the website. Because the href attribute doesn't begin with the string "http://www" it has been colored blue with the greenyellow background. On the other hand, the W3C website links do begin with "http://www" and that's why they have the other style.

Here I want to make a side note on using two styles in this way. When we discuss cascade and inheritance you will grasp the concept of overriding certain styles. Although the W3C website is an anchor element and it must have the greenyellow background with a blue text, it has been overridden with the more specific attribute selector.

The syntax for this selector is simple. Just precede the equal sign with the ^ symbol and type the string that the anchor's href attribute will begin with on the right of the equal sign like this:   a[href^="http://www"]


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials