CSS pseudo + adjacent selectors

/ Published in: CSS
Save to your folder(s)

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.

Copy this code and paste it in your HTML
  1. LI:first-child {font-weight: bold; color: red;}
  2. LI:first-child + LI {font-weight: bold;}
  3. LI:first-child + LI + LI {color: gray;}

URL: http://meyerweb.com/eric/articles/webrev/200007b.html

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.