Sélecteurs avancés

3

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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>.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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".

Voir le CodePen de Simon Arnold (@smnarnold).

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

Complétez les niveaux de 9 à 14 de CSS Diner 🍎

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme