Advanced Search

Return to Snippet

Revision: 10584
at January 5, 2009 08:54 by davebowker
Initial Code 
LI:first-child {font-weight: bold; color: red;}
LI:first-child + LI {font-weight: bold;}
LI:first-child + LI + LI {color: gray;}
Initial URL 
http://meyerweb.com/eric/articles/webrev/200007b.html
Initial Description 
Figure 5. Selecting the first-child LI elements that descend from a UL element.

By combining the first-child pseudo-class with the adjacent-sibling selector, it's possible to pick children other than the first one. For example, you might want to always style the third child of any element. That could be accomplished by writing:

*:first-child + * + * {color: green;}

It isn't necessarily the most common thing you'll ever try to do, but you never know. Just as an example, you might want to make the first list-item in a list boldfaced and red, the second boldfaced, and the third one gray. The styles would be:

LI:first-child {font-weight: bold; color: red;}
LI:first-child + LI {font-weight: bold;}
LI:first-child + LI + LI {color: gray;}

Again, it probably isn't something you've been waiting years to be able to accomplish, but now the capability is there for those moments when you need it.
Initial Title 
CSS pseudo + adjacent selectors
Initial Tags 
css
Initial Language 
CSS