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.
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
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
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
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
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:
- Display different color in alternate row using jQuery
- How to Alternate Table Row Colors in PHP and ASP
Thx, but why is Microsoft not allowing them? How are they imagine the web in the future? Silverlight?
Is there any workaround?
When you click “demo” then click “Back to tutorial” it takes you to “Animate a Contact Us Slide-Out Area using jQuery”. Besides that, thanks for sharing a great article. This is really informative.
Christian – They claim that they won’t support the CSS3 spec until it’s finalised when clearly it would be in everyone’s best interests if they started supporting parts of it as soon as possible.
Thanks for spotting that Kennedy. I’ve fixed it now.
I notice the tags are already working in Mac Chrome, but not Mac Firefox.
great info abt CSS 3….thanks
Love the article, but I really can’t wait for when we’ll be able to implement those with browsers supporting it…
This is so cool. I understand all of it but I had to just imagine it. For some reason, some demos don’t seem to show anything for me. This is pretty cool anyway though, the ability to disable fields via styles is pretty cool. That demo did work btw, just the alternate row ones did not.
There are test suites on CSS3 selector support to be found. This one shows basic support: http://www.css3.info/modules/selector-compat/
Essentially all browsers support CSS3 Selectors, or are close to doing so. There is one exception, but I believe there are JavaScripts around to add this missing CSS functionality.
Long overdue, I look forward to this being the new standard. Thanks for sharing…
Thanks for the heads up… I’m still new to CSS and web-dev as a whole, but I’m trying to get more information on the subject before I dive in head first
These are really interesting. Thanks for presenting them in such a clear fashion, showing the immediate benefits and practical uses for them. Seems like some good stuff here we can use right away in terms of progressive enhancement.
Does anyone here regularly use CSS3 selectors?
Helpful tips. Thanks!
Once again, Microsoft falling behind… so sad how such a huge company can have their heads SO far up their… well, you get the idea.
Sad that it’ll take year until CSS3 is a real browser standard. I’m wondering why the creators havn’t implemented css like xpath for html is just xml at the end. That would have made many things easier and all the pseudo-classes and counting, etc. would have been available from the beginning…
Nice, but I feel like we will be able to start fully using css3 right around the time css4 is rolled out. Thanks Microshaft for slowing progress once again. Do the world a favor, and kill internet explorer, focus on crappy operating systems, leave the browser to professionals, and ship windows with FF.
Hi! what font did you use for the image CSS SELECTORS?
This image?
http://inspectelement.com/wp-content/uploads/2009/07/css3-selectors1.jpg
I can’t remember to be honest. Try WhatTheFont!. It analyses images to try and find out what font is used. It’ll almost certainly find it.