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
© 2006 - 2023 Martin Ivanov