Selectors de germans adjacents

This translation is incomplete. Please help translate this article from English.

Això es coneix com un selector adjacent o selector del següent germà. Es seleccionarà únicament l'element especificat que segueix immediatament a l'anterior element especificat.

Sintaxi

former_element + target_element { style properties }

Exemple

li:first-of-type + li {
  color: red;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Un altre cas d'ús podria ser el estil de "caption span"s dels següents elements <img>:

img + span.caption {
  font-style: italic;
}

coincidiran amb els següents elements <span>:

<img src="photo1.jpg"><span class="caption">The first photo</span>
<img src="photo2.jpg"><span class="caption">The second photo</span>

Especificacions

Especificació Estat Comentari
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 Definició inicial

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) (Yes) 7.0[1] (Yes) (Yes)
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 2.1 (Yes) ? (Yes) (Yes)

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

Veure

Document Tags and Contributors

 Last updated by: Legioinvicta,