Sélecteurs CSS de base

Sélection par le nom de la balise

Pour sélectionner un ou des éléments par leur balise, utilisez directement le nom de la balise comme a, span, div, header.

Sélection par une ou plusieurs classes

Pour sélectionner un ou des éléments par une de leurs classes, utilisez le nom de la classe précédé d’un point « . ».

Exemple :

.maClasse

Vous pouvez affiner votre sélection en précisant d’autres classes que l’élément doit avoir, toujours préfixées d’un « . », accolées à la classe précédente.

.maClasse.deuxiemeClasse

Sélection par la présence d’un attribut

Pour sélectionner un élément ou des éléments qui possèdent un certain attribut, vous devez définir entre crochets « [ ] » l’attribut concerné.

Exemple :

a[download]

Sélectionne tous les liens ayant un attribut download.

Sélection par la valeur d’un attribut

Pour sélectionner un ou plusieurs éléments qui possèdent un certain attribut, vous devez définir entre crochets « [ ] » l’attribut concerné et sa valeur.

Exemple :

[data-analytics="GMT324-3"]

… ou uniquement par le début de cette valeur, avec l’opérateur « ^= ». Ainsi le code suivant renverra les éléments dont la valeur de l’attribut data-analytics commence par GMT3 :

[data-analytics^="GMT3"]

Sélection d’un élément par son identifiant

Pour sélectionner un élément par son identifiant, supposé unique, utilisez le nom de l’identifiant précédé d’un dièse « # ».

#monIdentifiant

Un identifiant est, normalement, unique. Ce sélecteur ne renvoie, donc, normalement, qu’un élément. Vous ne devriez donc pas avoir à accoler plusieurs identifiants.

Composition de sélecteurs

Vous pouvez composer des mode de sélection simple pour affiner vos sélecteur. Ainsi, pour sélectionner un élément par sa balise et une des classes qu’il contient, vous pouvez utiliser :

a.maClasse

L’identifiant étant le sélecteur le plus précis, il est toujours en début de déclaration et se suffit souvent à lui-même.

Sélection d’éléments situés dans d’autres éléments

On sépare le sélecteur du ou des parent et de ou des enfants par un espace. Le ou les parents peuvent alors être parents direct ou indirect.

div a

Tous les éléments <a> qui sont ont pour parent un élément <div>.

.parent .enfant

Tous les éléments ayant la classe enfant qui ont pour parent un élément ayant la classe parent.

#parent .enfant

Tous les éléments ayant la classe enfant qui sont contenus dans le parent, forcément unique, ayant l’identifiant parent.

#header div span a

Tout lien qui possède un parent <span> possédant lui-même un parent <div>, contenu dans un élément parent d’identifiant header.

<div id="header">
    <div>
       <span><strong><a href="#">Lien adressé par le sélecteur</a></strong></span>
    </div>
    <span><a href="#">lien non adressé par le sélecteur</a></span>
</div>

Rappel : l’enfant n’est pas nécessairement un enfant direct de son parent.

Revenir au sommaire