Les sélecteurs avancés permettent de cibler des éléments proches d’un autre élément.
Il existe deux sélecteurs de ce type : le combinateur d’adjacence directe, et le combinateur d’adjance indirecte.

Sélecteur d’adjacence directe

Pour cibler le frère d’un élément, nous allons avoir besoin du symbole +.
Voici sa syntaxe :

element1 + element2{ /* mes styles */ }

Ici les styles seront appliqués uniquement à element2 directement frère de element1.

C’est un bon moyen de cibler un élément dans un cas particulier, comme un p situé juste après un titre, ou pour appliquer des styles à des éléments semblables, sauf le premier de la fratrie.

Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs.

Exemple : appliquer une marge après un titre
Imaginons que nous souhaitions appliquer une marge suffisante pour espacer un p d’un h2 qui le précède, tout en conservant un certain rapprochement lorsque h2 est suivi d’un h3 (l’un servant de sous-titre direct à l’autre) :

h2 + p{ margin-top: 0.8em }
h2 + h3{ margin-top: 0.2em }

Le sélecteur d’adjacence indirecte

Le sélecteur d’adjacence indirecte est peu connu en CSS. Ce sélecteur vous permet d’appliquer des styles d’un seul coup à tous les frères d’un élément ciblé répondant à un sélecteur précis.

Le sélecteur utilise le caractère ~ disponible sous PC depuis les touches Alt Gr + 2(é ~) et sous Mac de puis les touches Alt + N.

element1 ~ element2{ /* mes styles */ }

Ici les styles seront appliqués à tous les element2 frères de element1, même si un autre frère vient se mêler entre deux element2, par exemple.

Cibler les frères non identiques à l’élément de départ

Ce sélecteur d’adjacence indirecte (~) va permettre de combler certaines lacunes du sélecteur d’adjacence directe (+).
Il sera capable de cibler tous les paragraphes qui suivent un titre, par exemple. Chose qui ne fonctionnera pas en faisant h3 + p, mais qui fonctionnera avec h3 ~ p.

Cibler les frères d’un élément survolé, ciblé ou typé

Dans la même logique que précédemment, il est possible de cibler, par exemple, tous les frères d’un li survolé (donc les autres li), ou d’un input typé.

li:hover ~ li{ opacity: 0.4; }

Sélecteur d’adjacence directe négative

Pour sélectionner les frères situés avant un élément, il faudra utiliser le sélecteur CSS3 ou plutôt la pseudo-classe nth-child().
Une valeur doit être renseignée entre les parenthèses du sélecteur pour cibler précisément des éléments.
Nth-child() accepte comme valeur une expression numérique, ou les mots-clefs odd et even (pour cibler un élément sur deux).

:nth-child(3n+1){ /* mes styles */ }

L’expression numérique comprend sa position (n) qui sera utilisée pour le calcul (ici *3 + 1).
Ici, les éléments sélectionnés seront :

  • n vaut 0 : 3 x 0 + 1 = 1 (soit le 1er élément)
  • n vaut 1 : 3 x 1 + 1 = 4 (soit le 4ème élément)
  • n vaut 2 : 3 x 2 + 1 = 7 (soit le 7ème élément)

Cette pseudo-classe à des limites :
Un exemple, plusieurs limites, en tout cas sur cette manière d’utiliser nth-child().

  • Cibler les frères d’un élément non identique ne semble pas possible
  • Par extension, cibler les frères qui précédent un élément détenteur d’une classe ne semble pas possible
  • Idem pour les frères qui précédent un élément détenteur d’une pseudo-classe
  • pour cibler le premier et le dernier élément, préférez :first-child à :nth-child(-n+1) et :last-child à :nth-last-child(n+2), qui offrent de meilleures prises en charge par le panel des navigateurs