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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: ExplosiveLab
Ultima modifica di: ExplosiveLab,