Sélecteurs CSS

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

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

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

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.

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

Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné. Syntaxe : A + B Exemple : div + p permettra de cibler n'importe quel élément <p> qui suit immédiatement un élément <div>.

Le combinateur '~' permet de sélectionner les nœuds qui 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 (immédiatement ou non) un élément <p> et qui ont le même élément parent.

Le combinateur '>' permet de sélectionner les nœuds qui sont des enfants 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>.

Le combinateur " " (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants 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>.

Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B Exemple : col || td permettra de cibler n'importe quel élément <td> sous la portée d'une colonne <col>.

Exemple: a:visited permettra de cibler l'ensemble des éléments <a> (des liens) ayant déjà été visités par l'utilisateur.

Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments <p> (les paragraphes) du document.