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

Selector Example Example 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-type p:first-of-type Selects every p element that is the first p element of its parent
:last-of-type p:last-of-type Selects every p element that is the last p element of its parent
-:only-of-type p:only-of-type Selects every p element that is the only p element of its parent
-:only-child p:only-child Selects 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-child p:last-child Selects every p element that is the last child of its parent
:root :root Selects the document’s root element
:empty p:empty Selects every p element that has no children
:enabled input:enabled Selects every enabled input element
:disabled input:disabled Selects every disabled input element
:checked input:checked Selects 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!