I’ve been meaning to check out the more complex selectors in CSS 2.1 for a long time but never seemed to find the time to experiment. So having some downtime the other day I thought I should get constructive.

Descendant selectors seem well used in CSS these days and are a powerful way to target HTML elements within the page (for e.g. div.message p, which targets all p tags within div elements that have a class of ‘message’). It’s a good way to keep your HTML as clean as possible because it reduces the need to give every element on the page a unique id or a class for targeting purposes. And they’re well supported in all the major browsers that I usually test with - Firefox, Safari, Opera, and IE down to 5.0.

But it was the combinator and attribute selectors, and pseudo-classes/elements that I was interested in - I wanted to see how easy they were to use and how well supported they were across these browsers, as I had my suspicions that IE 6 would not be happy. While I was at it I thought I’d check out what’s coming up in terms of new selectors in CSS 3 as well - CSS 3 extends the ways you can use attribute selectors and introduces many more pseudo classes. CSS 2.1 introduced the idea of using the node structure within the HTML to target certain elements and CSS 3 greatly extends this concept with it’s pseudo-classes.

I’m not going to get into an explanation of all these things as it’s outside the scope of this blog but if you’re interested in knowing more there’s an excellent article in 3 parts over at 456 Berea St.

What I was more interested in was the browser support on these selectors so I put together a page with various tests to check this out. You can see the results in the screenshots below. As expected IE 6 has very little support for any of these whilst the more modern browsers, including IE 7, have a much greater success rate.

So at this stage I’m not sure their usage is very practical. If we didn’t have to worry about IE 6 then they would definitely be a great addition to any CSS bod’s toolbox but with IE 6 still having such a large market share I don’t see this as an option anytime soon. They could potentially be used as an alternative to CSS hacks for all those various anomalies in IE 6, although this would still be a hack really.

Still, an interesting exercise and knowledge worth having for when we can finally say goodbye to IE 6!

Screenshots including associated CSS styles

CSS 2.1 Descendant selectors, combinator selectors, and pseudo-classes

Styles look the same across Firefox, Safari, IE 7, and Opera. IE 6 doesn’t pick up the Combinator selectors and Pseudo-classes.

CSS 2.1 Attribute selectors and Pseudo-elements

Styles look the same across Firefox, Safari, IE 7, and Opera, except for the pseudo-element, first:letter (shown in the large blue ‘P’). The placement of this letter is different in each browser. To demonstrate the difference the styling in Firefox is shown below and the next screenshot shows Safari. IE 6 doesn’t pick up the styling at all.

CSS 2.1 pseudo-element selector “first-letter” on Safari

CSS 3 Attribute selectors

Styles look the same across Firefox, Safari, IE 7, and Opera. IE 6 doesn’t pick up the styling at all.

CSS 3 Pseudo-classes

Styles vary across the browsers here as shown in the screenshots below. IE 6 doesn’t pick up the styling at all.

Firefox and Safari styling

Opera styling

IE7 styling

IE 6 screenshots

CSS 2.1 Selectors

CSS 3 Selectors