Smashing Magazine had a great article the other day on Taming Advanced CSS Selectors. The article is comprehensive and well-worth a read, but it also contains a bunch of information about selectors you won’t realistically be able to use for quite some time (mostly due to poor browser support). However, there are a good number of selectors detailed that you can, and probably should be taking advantage of immediately. After the jump I listed some of the advanced selectors that I use, and how and where I use them. If all you want is a quick reference, don’t listen to me, bookmark the excellent QuirksMode CSS compatibility chart.
(Advanced) Attribute Selectors
input[type="text"] { }
a[href$=".pdf"] { }
div[id*="foo"] { }
How many times have you added a class to text input elements just so you could style them? How about to external, or document links so you could have a hook there as well? Well with attribute selectors you don’t need that extra HTML cruft. Just make sure you aren’t using them for function-critical layout, because they won’t be recognized by IE6. In general, they are very useful for selecting:
- Inputs by type (text, checkbox, radio, etc.)
- Links by href (external links, document types, etc.)
- IDs or classes that contain a specific value
Pseudo-classes
ul li:hover { }
input:focus { }
ul li:first-child { }
Some pseudo-classes (namely hover, active, link, and visited) have been in use for quite some time. Focus is often overlooked (it gets removed by some CSS resets), but should be declared because of its benefit to accessibility for those that employ keyboard navigation. Before and after have marginal uses, especially with clearing hacks. First-child is definitely useful, and should probably be used more than it is currently (you don’t have to add “last” or “first” classes to your HTML). To summarize, use:
- Link, hover, visited, active for links
- Hover and active for other elements, for non-function critical styling (issues with IE compatibility)
- Focus, especially if you overwrote focus styles in a CSS reset
- First-child
Child Selectors & Combinators
In my opinion, child selectors and combinators only offer marginal benefit. For the most part you can accomplish the same thing with carefully crafted specificity rules. Regardless, since the only browser that doesn’t support them is IE6, feel free to use them in most cases.
That’s it! To save yourself the headache, don’t worry about memorizing other added selectors in CSS3 just yet. General IE support is extremely lacking, and there’s not a whole lot of value in a selector that isn’t recognized by the majority of your potential audience.
