MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selettore di Fratelli Adiacenti

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.

See also

Tag del documento e collaboratori

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