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.
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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
URL: http://meyerweb.com/eric/articles/webrev/200007b.html
Comments
Subscribe to comments