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

Poor Best

Rating:

/ 22

June 13, 2005

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

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

This attribute selector is very similar to the earlier one, but instead of matching the string at the beginning of the attribute's value, it matches the string at the end of the attribute's value. The syntax uses the $ sign instead of the ^ symbol. Suppose we need to differentiate between the links that refer to asp pages and links that refer to php pages. We can use the end with specific-value attribute selector to do this job. Let's take a look:

a
{
background-color: greenyellow;
color: blue;
}
a[href^="http://www"]
{
background-color: red;
color: white;
}
a[href$="asp"]
{
background-color: cyan;
color: black;
}
a[href$="php"]
{
background-color: maroon;
color: yellow;
}

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>
<a href="Home.html">Home</a>|<a href="contact.asp">Contact Us</a>|
<a href="forums.php">Forums</a>
<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, the Contact Us link refers to a page that has the extension .asp, and the Forums link refers to a page that has the extension .php. By using this selector, we have styled each link based on their extension (.php or .asp). This can be very handy, but unfortunately Microsoft Internet Explorer doesn't support attribute selectors at all. If you open this page using IE you will get the following result (only the a selector style is applied to the links):