Sélecteurs de frère adjacent CSS

Le sélecteur de frère voisin (Adjacent sibling selector) permet de sélectionner un élément qui suit un autre élément et qui a le même parent.

Sélectionner les frères adjacents

Si vous devez sélectionner un élément qui suit un autre élément et qui a le même parent, vous pouvez utiliser le sélecteur de frère voisin (Adjacent sibling selector).

Par exemple, pour augmenter le margent supérieur du paragraphe qui suit l'élément h1, il peut être écrit ainsi :

h1 + p {margin-top:50px;}

Ce sélecteur se lit ainsi : «Sélectionner le paragraphe qui suit l'élément h1, où h1 et p ont un parent commun».

Essayez-le vous-même

Explication de la syntaxe

L'opérateur de frère voisin adjacent utilise un plus (+), c'est-à-dire l'opérateur de combinaison de frère voisin (Adjacent sibling combinator).

Remarque :Comme les opérateurs de combinaison, un espace peut se trouver à côté de l'opérateur de frère voisin.

Voyez le fragment de l'arbre de document ci-dessous :

<div>
  <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
    <li>Élément de liste 3</li>
  </ul>
  <ol>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
    <li>Élément de liste 3</li>
  </ol>
</div>

Dans le fragment ci-dessus, l'élément div contient deux listes : une liste non ordonnée et une liste ordonnée, chacune contient trois éléments de liste. Ces deux listes sont des frères adjacents, et les éléments de liste eux-mêmes sont également des frères adjacents. Cependant, les éléments de la première liste et ceux de la deuxième liste ne sont pas des frères adjacents, car ces两组 éléments de liste n'appartiennent pas au même élément parent (ils ne peuvent être considérés que comme cousins germains).

Rappelez-vous, un opérateur peut ne choisir qu'un seul deuxième frère adjacent. Voir le sélecteur suivant :

li + li {font-weight:bold;}

Ce sélecteur ne mettra que les deuxièmes et troisièmes éléments de la liste en gras. Le premier élément de la liste n'est pas affecté.

Essayez-le vous-même

Combiner d'autres sélecteurs

L'opérateur frère adjacent peut être combiné avec d'autres opérateurs :

html > body table + ul {margin-top:20px;}

Ce sélecteur est interprété comme : sélectionne tous les éléments ul frères qui apparaissent immédiatement après un élément table, qui est contenu dans un élément body, et l'élément body est lui-même un enfant de l'élément html.