Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.
Questo selettore è denominato selettore adiacente o selettore di fratelli adiacenti ( rispettivamente adjacent selector & next-sibling selector). Esso consente di selezionare solo l'elemento selezionato che segue immediatamente il primo elemento selezionato.
Sintassi
elemento precedente + elemento bersaglio { proprietà di stile }
Esempio
li:first-of-type + li {
color: orange;
}
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
Another use case might be styling of "caption span"s of the following <img> elements:
img + span.caption {
font-style: italic;
}
will match the following <span> elements:
<img src="photo1.jpg"><span class="caption">The first photo</span> <img src="photo2.jpg"><span class="caption">The second photo</span>
Specifiche
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 The definition of 'next-sibling combinator' in that specification. |
Working Draft | |
| Selectors Level 3 The definition of 'Adjacent sibling combinator' in that specification. |
Recommendation | |
| CSS Level 2 (Revision 1) The definition of 'Adjacent sibling selectors' in that specification. |
Recommendation | Initial definition |
Compatibilità con i browser
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| supporto di base | (Yes) | (Yes) | 7.0[1] | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| supporto di base | 2.1 | (Yes) | ? | (Yes) | (Yes) |
[1] Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.