Frère et soeur adjacente - Astuces CSS

Table des matières:

Le combinateur frère adjacent dans CSS n'est pas un sélecteur en soi, mais une façon de combiner deux sélecteurs. Par exemple:

p + p ( margin: 0; )

Le signe plus (+) est le combinateur frère adjacent, entre deux sélecteurs de balises de paragraphe (élément). Cela signifie «sélectionnez n'importe quelle balise de paragraphe qui se trouve juste après une autre balise de paragraphe (sans rien entre les deux)». Voici quelques exemples de ce qu'il sélectionnerait:


I'm a paragraph
I get selected!
I'm a paragraph

Monkey hair
I will NOT get selected

Ceci est surtout utile lorsque vous utilisez un balisage sémantique et que vous devez vous adapter à certains scénarios dans lesquels les éléments sont directement côte à côte.

Voir le Pen Adjacent Sibling Selector de Sara Cope (@saracope) sur CodePen.