CSS3: A look at new Selectors

Selectors in CSS are something that is used to target elements on a page and style them. In CSS3, far more options are available for element selection as compared to the previous versions. This would mean much ease and swiftness in the implementation of diverse designs for web pages. 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 CSS3 makes it so much easier and more flexible.

Even and odd rows can be styled with the following example codes:

Other than that, you can also target a specific row for styling. In the following pieces, 3rd list-item and 5th paragraph elements are targeted for styling:

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

With CSS3, users can now also style the 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. For enabled case:

For disabled case:

So as we see, the styling of particular elements of a page has been made very convenient with CSS3. This case and facility, along with several other facilities, have made CSS3 a very popular scripting language for web developers and designers.