CSS3 gives us powers to reach out and touch the exact content we want via a set of new selectors. Many of these will allow us to finally drop JavaScript-powered alternatives, like those for zebra-striped tables, but many more will be useful simply for cutting down on the size of our stylesheets and letting us do away with unnecessary classes and ids.
Surprisingly, several of these selectors are widely available to us now; IE7+ supports the later sibling and attribute selectors - see below. A full and comprehensive support listing can be found at PPK's Quirksmode, which is a site I can't speak highly enough about.
I must admit, I have trouble visualising much of a use case for the later sibling ~. It's specified by two simple selectors and applies to the second one whenever it's preceded by the first one - this doesn't have to be immediately preceding, just sharing the same parent. See the first instance in the example below, where the last two paragraphs are preceded by an <h4>, and so are a lighter colour than the paragraph before the heading.
Find the two lighter paragraphs hard to read? We can use the ::selection selector to help - try highlighting them with your mouse. Note that this method uses the new double-colon notation, and furthermore that you need to specify the selectors separately for different browsers, which is correct per the spec.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
I've already shown one application of attribute selectors in my page on generated content - automatically adding a mini-icon to offsite links - but there's loads more. An obvious and very useful one is to select form elements by type, rather than laboriously applying classes to each different variety. See below.
Attributes are available via [attr="blah"], which will match anything with exactly that attribute, but the string can be a partial match. That is, [attr^="blah"] works when the attribute starts with blah, and [attr$="blah"] when the attribute ends with the string. Finally, [attr*="blah"] is used when the attribute contains blah anywhere within.
HTML5 brings us a much-needed new set of form field types, such as email and date, as well as new form-specific selectors like :required, :valid and :invalid, :enabled, :disabled and :checked. Try filling in the text boxes and ticking the checkboxes in the tiny form below.
CSS learns to count! This new set of selectors allow styling to be applied to a subset of elements based on a sequence - to every odd row in a table, for example, or to every third heading, or any similar set. Here we can easily produce zebra-striped tables, even ones that react to a hover. See below.
It may help to point out that all the x:nth-child selectors apply to an element x when that element is the nth-child - not to a child of the x element.
| Heading | Heading | Heading | Heading |
|---|---|---|---|
| De | do | do | do |
| De | dah | dah | dah |
| De | do | do | do |
| De | dah | dah | dah |
© Adam Taylor 2023