General sibling

Le combinateur général sibling de CSS ressemble à ceci :

//CSS
.featured-image ~ p {
  font-size: 90%;
}

Dans cet exemple, vous sélectionneriez tous les paragraphes qui suivent l'image mise en avant (l'élément ayant le nom de classe “featured-image”). D'une manière générale, on sélectionne le ou les éléments situés après le ~ s'ils ont un parent commun avec l'élément situé avant le ~.

On sélectionne ainsi des éléments situés au même niveau dans la hiérarchie. Dans notre exemple, .featured-image et les éléments p sont au même niveau hiérarchique.

À la différence du combinateur adjacent qui cible uniquement le premier frère, celui-ci cible tous les frères (siblings).

Si le sélecteur était plus large (avec un ou plusieurs éléments avant .featured-image ou après p) les règles normales s'appliqueraient. Autrement dit, .featured-image ~p span sélectionnerait les span qui sont descendants de featured-images ~ p.

La spécification CSS4 désigne maintenant General Sibling sous le nom de Following-sibling combinator (~) (le combinateur de frères suivants).

Démo

Voici un autre exemple qui surligne tous les paragraphes qui suivent une image :

//CSS
img ~ p {
  background-color: #FEF0B6;
  padding: 5px;
}

Le résultat :

See the Pen General sibling selector by Robin Rendle (@robinrendle) 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.