CSS3 Demos

• Home
• Backgrounds
• Rounded Corners
• Drop Shadows
• Transparency
• Columns
• Generated Content
• Custom Fonts
• Media Queries
• CSS3 Selectors

CSS3 Selectors

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.

Later Sibling and ::selection

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 it's a little strange in Firefox, in that if you try to combine the -moz- version with the standard in one grouped selector, it doesn't work.

Attribute and form-specific selectors

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.

Some extremely handy form-specific tricks can be done with CSS3, too: we have the :enabled, :disabled and :checked selectors available. Try ticking the checkboxes shown in the tiny form below:

nth-child selectors

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.