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;
}

• BROWSE / IN TIMELINE
• « How to make a custom 404 page
• » Redirecting with .htaccess

• BROWSE / IN CSS
• « CSS Positioning
• » How to make RSS icons in every colour with just one image