New Selectors Introduced in CSS3

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. CSS3 has introduced a variety of new selectors that can be used to access elements in a web page.

Other useful CSS tutorials:

CSS3 New Selectors

SelectorExampleExample Description
[attribute^=value]a[src^=”https”]Selects every a element whose src attribute value begins with ‘https’
[attribute$=value]a[src$=”.pdf”]Selects every a element whose src attribute value ends with ‘.pdf’
:first-of-typep:first-of-typeSelects every p element that is the first p element of its parent
:last-of-typep:last-of-typeSelects every p element that is the last p element of its parent
-:only-of-typep:only-of-typeSelects every p element that is the only p element of its parent
-:only-childp:only-childSelects every p element that is the only child of its parent
:nth-child(n)p:nth-child(3)Selects every p element that is the third child of its parent
:nth-last-child(n)p:nth-last-child(3)Selects every p element that is the third child of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(3)Selects every p element that is the third p element of its parent
:nth-last-of-type(n)p:nth-last-of-type(3)Selects every p element that is the third p element of its parent, counting from the last child
:last-childp:last-childSelects every p element that is the last child of its parent
:root:rootSelects the document’s root element
:emptyp:emptySelects every p element that has no children
:enabledinput:enabledSelects every enabled input element
:disabledinput:disabledSelects every disabled input element
:checkedinput:checkedSelects every checked input element
:not(selector):not(p)Selects every element that is not a p element

Compatibility

The new CSS3 features are available and compatible with the latest versions of all the major browsers in the world.

If you still have Internet Explorer 8 running on your machine, CSS3 will not be very useful.

Microsoft released Internet Explorer 9 few months ago and I advise you to update to the latest version if you want to work with CSS3. Chrome, Safari, Mozilla and Opera are all compatible with CSS3.

Conclusion

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.

In Closing

While writing this article, it’s always a possibility that I missed some other great CSS3 selectors. Feel free to share those with our readers!