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"]
Next: The End With Specific-Value Attribute Selector >>
More Style Sheets Articles
More By Michael Youssef
