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:
- 5 Useful CSS3 Properties You Need to Know
- CSS Elements Hierarchy: Concept of Selective Styling
- CSS Frameworks: Easy Ways To Keep Your Website in Style
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!