Sélecteurs CSS

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

Les sélecteurs simples

Les sélecteurs de type
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
Syntaxe : nomelement
Exemple : input permettra de cibler n'importe quel élément <input>.
Les sélecteurs de classe
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
Syntaxe : .nomclasse
Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index).
Les sélecteurs d'identifiant
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
Syntaxe : #valeurid
Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
Le sélecteur universel
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
Syntaxe : * ns|* *|*
Exemple : * permettra de cibler tous les éléments du document.
Les sélecteurs d'attribut
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).

Les combinateurs

Les sélecteurs de voisin direct
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
Syntaxe : A + B
Exemple : ul + li permettra de cibler n'importe quel élément <li> qui suit immédiatement un élément <ul>.
Les sélecteurs de voisins
Le combinateur '~' permet de sélectionner les nœuds qui précèdent ou suivent un élément et qui ont le même parent.
Syntaxe : A ~ B
Exemple : p ~ span permettra de cibler les éléments <span> qui suivent ou précèdent un élément <p> et qui ont le même élément parent.
Les sélecteurs d'éléments fils
Le combinateur '>' permet de sélectionner les selects nœuds qui sont des fils directs d'un élément donné.
Syntaxe : A > B
Exemple : ul > li permettra de cibler tous les éléments <li> qui sont directement situés sous un élément <ul>.
Les sélecteurs d'éléments descendants
Le combinateur ' ' permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
Syntaxe : A B
Exemple : div span permettra de cibler n'importe quel élément <span> situé à l'intérieur d'un élément <div>.

Les pseudo-éléments

Les pseudo-éléments sont des abstractions de l'arbre du document qui vont au-delà de la sémantique HTML. Par exemple, HTML ne possède pas d'élément particulier pour décrire la première lettre ou la première ligne d'un paragraphe, ou encore la puce d'une liste. On pourra utiliser les pseudo-éléments pour cibler ce contenir et lui associer des règles CSS afin de les mettre en forme indépendamment.

Les pseudo-classes

Les pseudo-classes permettent de cibler des éléments en fonction d'informations qui ne sont pas contenues dans le document (e.g. un état) ou qui sont particulièrement complexes à extraire. On peut par exemple utiliser une pseudo-classe pour cibler les liens qui ont déjà été visités.

Spécifications

Spécification État Commentaires
Selectors Level 4 Version de travail  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1 1.0 (1.7 ou moins) 3.0 3.5 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 1.5 1.0 (1.9.2) ? ? 3.2

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, daisyback, personnel, Sebastianz
 Dernière mise à jour par : SphinxKnight,