CSS: selecting a specific child

The selectors are one of the most powerful features in CSS. Sometimes they can save you a lot of additional work. In this article I'll show you how to set the style of a specific child in a list of elements.

The example's html code:

So, let's imagine that we have to set a background color for the "span" tag with "ddddd" content. There are several available solutions with javascript, like this one (jQuery):

That's simple solution, but it requires javascript. We can do that same thing by using only CSS.
First, we will select all the "span" childs:

Changing the style for only the first "span" tag:

And at the end styling the fourth element:

And the result is:


P.S.
don't forgot to add a DOCTYPE in your html.
The code above works in IE7, IE8, FireFox, Opera, Safari, Chrome