Most CSS selectors are well known, but there are some interesting selectors that are not common used, like the adjacent-sibling selector. An adjacent sibling selector will select the sibling immediately following an element, with the same parent. In this example, I will show you how to use the adjacent-sibling selector to style this list.
What exactly is an adjacent-sibling selector and what is the syntaxis?
An adjacent-sibling selector targets an element directly after another element with the same parent. For example you can target every <h3> that is directly after a <h2>. A really clear explanation of this selector can be found on Selectutorial. The syntaxis of this selector is the +. For example:
h2 + h3 {
color:red;
}
As you can see here the <h3> which comes directly after the <h2> becomes red.
How can you style this list with the adjacent-sibling selector?
With the adjacent-sibling selector, you can target any of the <li>-element without giving them any classes or id’s. That saves time and also bytes. So it’s convenient and cheaper. Let’s put it into practice. The plan is to give the first three countries another color and a medal. So USA get’s a gold medal, China a silver one and the bronze one is for Russia. I will use these images:
.
But first, let take a look at the CSS that will target the different countries:
li {
/* 1st : U.S.A. */
}
li + li {
/* 2nd : China */
}
li + li + li {
/* 3rd : Russia */
}
li+ li + li + li {
/* every other li element*/
}
You may ask yourself why the fourth selector is there, as we don’t want to style the fourth element. But pay attention that li+li+li targets every element that has at least 2 other li elements of the same parent before itself, you must set the color and other elements back to default or all other li elements will be styled like the third one. Now you have the selectors, you can be creative in order to style the list. This is my outcome.
The CSS I used to make this list:
li {
background:url(gold.gif) no-repeat;
background-position:70px 50%;
color:gold;
font-size:1.1em;
font-weight:bold;
}
li + li {
background:url(silver.gif) right no-repeat;
color:silver;
background-position:70px 50%;
}
li + li + li {
background:url(brons.gif) right no-repeat;
color:#8B5A2B;
background-position:70px 50%;
}
li+ li + li + li {
font-weight:normal;
color:white;
background:none;
padding:0;
font-size:1.0em;
}
- Fatih Hayrioğlu’nun not defteri » 18 Mart 2008 web’den seçme haberler
- Links of Interest - CSS-Tricks
- Love is not Over » Blog Archive » Link Digest
- CSS Diseases: Divitis & Classitis | Onyx Design Weblog
1
This is a wonderful method for targeting elements just only works in browsers that support CSS2 fully **cough not IE**
2
A lot of these extremely useful but not commonly used CSS selectors aren’t commonly used because of the serious shortcomings of Internet Explorer 6, and to a lesser extent Internet Explorer 7. With IE8 promising to be fully CSS 2.1 compliant, it will be useful indeed to know all these selectors and to make use of them as IE6 fades into the background.
Great job in keeping these selectors in the forefront of people’s minds.
3
@NatalieMac,
You’re absolutely right. There are so much uses of these selectors and still they are so less used. According to this reference on westciv the adjacent-sibling selector is not supported by IE6 or lower. But it will be safe to use this is the near future, if less people use IE6. And you can always add css for the lower versions of IE with conditional comments.
Thanks for your comment
@Nick, thanks for your comment! I must say that this selector is supported by IE7 (and IE8) so IE6 is the only problem with this method.
4
Really cool, never heard of this function before. A pitty that - as almost always - ie6 doesn’t support this…
5
@Edwin, Thanks for your comment! I really can’t wait for the day that we don’t have to be concerned about IE6 anymore. There are so many great techniques out there that can’t be used yet, because of IE6.
6
hi nice post, i enjoyed it