Selecting only the first element occurrence out of siblings with the same class name with CSS3

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

Imagine you have the following markup…

[sourcecode language=”html”]
<ul>
    <li>item 0</li>
    <li>item 1</li>
    <li class="marked">item 2</li>
    <li class="marked">item 3</li>
    <li class="marked">item 4</li>
</ul>
[/sourcecode]

… And you need to apply special styles only to the first occurence of the .selected class. CSS3 has a lot of possibilities for selecting elements, but it does not provide solution for this case. So, when :nth-of-type(), :first-of-type, nth-child() and :first-child do not work, you can use this one:

[sourcecode language=”css”]
/* select any .marked element */
.marked {
color: #f00;
}

/* override all .marked elements but the first using the sibling selector */
.marked ~ .marked {
color: #000;
}
[/sourcecode]

Related Posts

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov