A new version of Inspect Element is coming soon! Subscribe to the newsletter for updates. Subscribe

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.

css3-selectors

Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Alternate Row Styling

view demo

There are no ways of targeting alternate elements using CSS2 but CSS3 has added comprehensive support allowing you to style odd or even rows or even every 3rd, 4th, 5th or user defined number of rows. There are ways of doing so using javascript or even server side code such as PHP but this CSS3 makes it so much easier and more flexible.

Odd or Even Rows

li:nth-child(odd) { color: blue; margin-left: 15px; }
li:nth-child(even) { color: green; margin-left: 15px; }

Very simple to select odd rows with CSS3 as you can see above example adding a margin and changing the colour of odd or even list-items.

Every 3rd Row

li:nth-child(3n) { color: orange; margin-left: 15px; }

Specific Row Styling

view demo

It’s just as easy to pick out a specific row, here targeting the 3rd list-item and 5th paragraph elements:

li:nth-of-type(3) { color: blue; margin-left: 15px; }
p:nth-child(5) { color: green; margin-left: 15px; }

First and Last Element Styling

view demo

Once again very easy to pick out the first and last defined elements using CSS3

First Element

li:first-of-type { color: blue; margin-left: 15px; }

Last Element

p:last-of-type { color: green; margin-left: 15px; }

First Two Elements

As a demonstration on how flexible CSS3 selectors can be here is an example of the first two elements being selected:

li:nth-child(-n+2) { color: blue; margin-left: 15px; }

Last Two Elements

Of course the same can be done with the last two elements:

p:nth-last-child(-n+2) { color: red; margin-left: 15px; }

Replacing the number 2 will target whatever desired number of elements at the beginning or end.

All but First and Last Elements

It is also possible to combine the above examples and reverse it so that you can target everything in between the first and last elements. This method is slightly different as it uses multiple, stacked selectors to get the job done:

p:not(:first-of-type):not(:last-of-type) { color: orange; margin-left: 15px; }

This means that it is also possible to select everything but the top two and bottom two elements by combining the :not selector and the :nth-child(-n+2) or :nth-last-child(-n+2) selectors:

p:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) { color: blue; margin-left: 15px; }

Styling Enabled and Disabled Input Fields

view demo

With CSS3 it is now even easier to style input fields based on whether they are disabled or not. This allows designers to improve usability by defining a more obvious way of communicating to the user that an input field is not available for use.

Enabled

input:enabled {  border: 2px solid green; }

Disabled

input:disabled { background-color: #e7e7e7; border: 2px solid grey; }

The Future

It’s clear to see that CSS3 selectors are going to make our lives easier as well as give us interesting new ways of looking at things in web design. Because CSS3 isn’t actually finalised and the lack of support from Microsoft, we haven’t really seen how CSS3 can change things but as more and more browsers support them and more and more users upgrade those browsers the more we’ll see CSS3 selectors in the wild. For now though, it is certainly feasible to start using them but not in a way that the design is so dependent on them that it will break in unsupported browsers.

Further Reading:

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: