Sélecteurs avancés

Groupes

Lorsque des sélecteurs sont séparés par une virgule , les éléments correspondant à l'un ou l'autre des sélecteurs sont retournés.

Par exemple, la règle suivante:

#no1, #no2 { ... }

Permet de sélectionner les éléments avec l'id #no1 et #no2 afin de leur appliquer un style commun.

Cette méthode est parfois pratique pour éviter d'ajouter une classe supplémentaire dans le code HTML, mais attention de ne pas en abuser.

Universel

Le sélecteur universel cible tous les éléments sans distinction.

Par exemple, la règle suivante:

* { ... }

Permet de sélectionner les trois éléments avec la classe .element, mais aussi l'élément .group ainsi que les balises <html> et <body>.

Le sélecteur universel peut être utilisé afin de sélectionner tous les éléments à l'intérieur d'un autre sélecteur ou encore pour simplifier le débogage en mettant en évidence tous éléments sur une page, etc.

Descendants directs

Similaire aux sélecteurs de descendants, lorsque le symbole plus grand que > est inséré entre les deux sélecteurs, seul les descendants direct, soit les enfants, sont sélectionnés.

Par exemple, la règle suivante:

body > .element { ... }

Permet de sélectionner les éléments avec la classe .element, mais uniquement si <body> est leur parent. Si une ou des balises les sépares, comme c'est le cas avec ceux dans .group, ils sont ignorés.

Voisins

Le symbole ~ indique qu'il s'agit d'un sélecteur de voisins. Si un ou plusieurs éléments correspondent au 2e sélecteur et qu'ils apparaissent dans le DOM au même niveau, mais après un élément correspondant au 1er sélecteur, ces éléments doivent être sélectionnés.

Par exemple, la règle suivante:

#no1 ~ .element { ... }

Sélectionne tous les éléments avec la classe .element précédés par une balise avec le id #no1.

Si l’élément #no0 avait existé, il n’aurait pas été sélectionné, même s’il avait été à l’intérieur de .group, car il aurait été avant l’élément #no1 et que seuls les éléments suivants peuvent être sélectionnés. Voisin direct

Le symbole + indique qu'il s'agit d'un sélecteur de voisin direct. Si un élément correspond au 2e sélecteur et qu'il apparait dans le DOM immédiatement après un élément correspondant au 1er sélecteur, autrement dit s'ils sont voisins, l'élément doit-être sélectionné.

Par exemple, la règle suivante:

#no1 + .element { ... }

Sélectionne l'élément avec la classe .element seulement s'il est immédiatement précédé par une balise avec le id #no1.

Attribut

Les sélecteurs d'attribut, comme leur nom l'indique, ciblent les éléments en fonction d'un attribut en particulier. Il est possible de sélectionner des éléments en fonction de la présence d'un attribut ou même de raffiner la sélection en spécifiant la valeur que devrait avoir l'attribut.

Par exemple, la règle suivante:

[title="demo"] { ... }

Sélectionne tous les éléments aillant un attribut title, d'on la valeur correspond à "demo".

Pour sélectionner tous les éléments aillant un attribut title, il aurait été possible de faire simplement [title], sans spécifier de valeur.

OUTIL Selectors explained Traduire ses sélecteurs CSS en texte humainement lisible afin de valider leur portée.
EXERCICE CSS Diner - Niveaux 9 à 14 Complétez les niveaux 9 à 14 de CSS Diner 🍎