Forum Moderators: not2easy
3. CSS3 selectors
There is a very handy CSS3 Selector Test Suite [css3.info] which you can use to check support of most of the CSS3 Selectors without a test page. You need to run the test in the browser you're testing, it's a live test. We're going to try and cover them all with examples of their usage here in this series.
We will also cover a number of lesser used CSS2.1 selectors as well, esp. when the CSS3 selector build and expand on them.
When implementations lack support for a new selector, it often becomes quite hard to find a way to do something for those aging browsers, still there are a number that are in fact quite widely implemented and by consequence usable today.
Even a selector that's not going to be supported by the majority of your visitors can be put to use to enhance the experience of those visitors who do have a browser that supports it, just don't use these for essential styling without which the page becomes to horrible to use.
We covered following CSS3 selectors:
3.1. General Sibling combinator [webmasterworld.com]
3.2. Attribute selectors [webmasterworld.com]
3.3. :not() pseudo class [webmasterworld.com]
3.4. :root pseudo class [webmasterworld.com]
3.5. nth-*() pseudo class [webmasterworld.com]
3.6. last-child pseudo class [webmasterworld.com]
3.7. first and last child of type [webmasterworld.com]
3.8. only child and only child of a type selectors [webmasterworld.com]
3.9. empty pseudo selector [webmasterworld.com]
3.10. target pseudo selector [webmasterworld.com]
3.11. UI element states pseudo classes [webmasterworld.com]
3.12. pseudo elements [webmasterworld.com]
There are a few more selectors covered in other CSS3 modules such as the basic User Interface module. The CSS3 namespaces module adds a few selector complications as well. We'll cover them with the appropriate modules.
[edited by: swa66 at 1:16 pm (utc) on July 8, 2009]
