Imagine you have the following markup…
<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>
… 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:
/* select any .marked element */
.marked {
color: #f00;
}
/* override all .marked elements but the first using the sibling selector */
.marked ~ .marked {
color: #000;
}
Related Posts
- CSS3 Treeview. No JavaScript.
- HTML5 Resume Generator and Onepager Website
- Fully Functional CSS3-only Tabstrip Without JavaScript
- Imageless CSS3 Custom Checkboxes and Radio Buttons
- Creating Gaussian Blur Effect With CSS3
- Fancy CSS3 Tooltips (Yeah, without any JavaScript)
- How to Style Select Boxes with CSS3
- CSS3 Element Reflections
- CSS3 iPhone Toggle Buttons
- CSS3 Background Image Cropping
