Adjacent sibling

Le combinateur Adjacent Sibling n'est pas un sélecteur en tant que tel, mais plutôt une façon de combiner deux sélecteurs. Par exemple :

//CSS
p + p {
  margin: 0;
}

Dans la nouvelle spécification, le terme adjacent sibling est remplacé par Next-sibling combinator (+).

Le signe plus + est le combinateur de frères (siblings) adjacents, entre deux éléments paragraphes. Cela signifie : “sélectionner tout élément paragraphe qui est directement après un autre élément paragraphe (sans rien entre les deux)”. Voici quelques exemples de ce qui serait sélectionné :

//HTML
<div>
  <p>Je suis un paragraphe</p>
  <p>Je suis sélectionné !</p>
</div>

<div>
  <p>Je suis un paragraphe</p>
  <h2>Monkey hair</h2>
  <p>Je ne suis PAS sélectionné !</p>
</div> 

C'est surtout utile lorsqu'on a un balisage sémantique et qu'on a besoin de s'adapter à certains scénarios dans lesquels les éléments se suivent directement.

See the Pen Adjacent Sibling Selector by Sara Cope (@saracope) on CodePen.


À lire également sur La Cascade :

Astuces CSS avec checkbox, par Will Boyd

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.