See last weeks post for part one of Explaining CSS Selectors.

Attribute selectors allow you to target a group of items on a page by matching a particular attribute. This opens up a whole new method of selecting your targets. Unfortunately attribute selectors are not supported in IE6 (which is why they’re not very commonly used), and IE7’s support is a bit buggy at times, however with IE8 out today, hopefully support for these selectors will be greatly increased and we can finally get away from being held back by supporting IE6 users.

Attribute selectors can be used in a number of ways. You start with either a HTML selector or the universal selector (*) followed by the attribute selector within square brackets ie.

[sourcecode language=”css”]img[alt] { border: 2px solid red; }
img[rel=”external”] { border: 2px solid blue; }
img[alt~=”photo”] { border: 2px solid green; }
p[lang|=”en”] { color: red; }[/sourcecode]

Pseudo-classes allow you to target even more specific elements on the page. We’ve seen some of these before however I’ll cover them all below.

The first-child pseudo-class matches an element that is the first child element of another element. For example, to target the first list item in a list you could use

[sourcecode language=”css”]ul li:first-child { margin-left: 20px }[/sourcecode]

Allows you to specify the properties for an unvisited anchor link eg.

[sourcecode language=”css”]a:link { colour: blue; }[/sourcecode]

Allows you to specify the properties for a visited anchor link.

There are 3 dynamic pseudo-classes that are usually activated by a user on the page. The 3 selectors are

Next week I’ll cover the last of the selectors, the pseudo-elements, and also give some every day examples of using these more advanced selectors.