Codex

Astuces et codes à emporter.

Css

Liste des séclecteurs.



Sélecteur Description V. CSS
Elem Sélectionne tous les élément de type E 1
Elem .maclasse Sélectionne les éléments E possédant un attribut class="maclasse" 1
Elem #monid Sélectionne un élément E possédant un attribut id="monid" 1
Elem:link Sélectionne tout élément E représentant l’ancre d’un lien non visité jusqu’à présent 1
Elem:visited Sélectionne tout élément E représentant l’ancre d’un lien déjà visité 1
Elem, F Sélectionne tous les éléments de type E et de type F 1
Elem F Sélectionne tous les éléments F à l’intérieur des éléments E 1
Elem:active Sélectionne un élément E qui est actuellement cliqué 1
Elem::first-letter Sélectionne la première lettre de tout élément E 1
Elem::first-line Sélectionne la première ligne (dans le résultat final) de tout élément E 1
* Sélectionne tous les éléments 2
Elem > F Sélectionne les éléments F enfants directs des éléments E 2
Elem + F Sélectionne tout élément F placé directement après un élément E 2
Elem[foo] Sélectionne tout élément E possédant un attribut foo 2
Elem[foo="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » 2
Elem[foo~="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient distinctement « bar » (c’est-à-dire dont la valeur contient le mot « bar » séparé du reste par des espaces) 2
Elem[foo|="en"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence par « en » séparé du reste par un tiret (ou hyphen en anglais) 2
Elem:hover Sélectionne un élément E qui se situe sous le curseur de la souris 2
Elem:focus Sélectionne un élément E qui a le focus 2
Elem:first-child Sélectionne tout élément E étant le premier enfant de son parent 2
Elem:lang(fr) Sélectionne tout élément E dont l’attribut langage possède la valeur « fr » 2
Elem::after Ce sélecteur permet d’intégrer du contenu après un élément E 2
Elem::before Ce sélecteur permet d’intégrer du contenu avant un élément E 2
Elem ~ F Sélectionne tout élément F placé après un élément E dans la page 3
Elem[foo^="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence exactement par « bar » 3
Elem[foo$="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur se termine exactement par « bar » 3
Elem[foo*="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient la valeur « bar » 3
Elem:target Sélectionne un élément E contenant une ancre qui vient d’être cliquée à partir d’un lien ancre 3
Elem:enabled Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est activé 3
Elem:disabled Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est desactivé 3
Elem:root Sélectionne un élément E racine du document 3
Elem:empty Sélectionne tout élément E qui ne possède pas d’enfant (ni de noeud de type texte) 3
Elem:nth-child(n) Sélectionne tout élément E étant le n-ième enfant de son parent 3
Elem:nth-last-child(n) Sélectionne tout élément E étant le n-ième enfant de son parent en comptant les enfants à partir du dernier 3
Elem:checked Sélectionne tout élément E de type input coché au sens large (checked ou selected) 3
Elem:last-child Sélectionne tout élément E étant le dernier enfant de son parent 3
Elem:only-child Sélectionne tout élément E qui est le seul enfant de son parent 3
Elem:nth-of-type(n) Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent 3
Elem:nth-last-of-type(n) Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent en comptant à partir de la fin 3
Elem:first-of-type Sélectionne tout élément E premier enfant de son type par rapport à son parent 3
Elem:last-of-type Sélectionne tout élément E dernier enfant de son type par rapport à son parent 3
Elem:only-of-type Sélectionne tout élément E seul enfant de son type par rapport à son parent 3
Elem:read-write Sélectionne tout élément E de type input avec lequel l’utilisateur peut interagir (comme un champ dans lequel il peut écrire par exemple) 3-UI/4
Elem:read-only Sélectionne tout élément E de type input avec lequel l’utilisateur ne peut pas interagir (éléments possédant un attribut disabled par exemple) 3-UI/4
Elem:placeholder-shown Sélectionne tout élément E qui affiche actuellement la valeur de son attribut placeholder 3-UI/4
Elem:default Sélectionne un élément E dans une liste ou un groupe qui est l’élément défini par défaut 3-UI/4
Elem:valid Sélectionne tout élément E de type input dont la valeur est évaluée comme valide (dont la valeur possède une forme correspondant à ce qui est attendu) 3-UI/4
Elem:invalid Sélectionne tout élément E de type input dont la valeur est évaluée comme invalide (valeur ne correspondant pas à ce qui est attendu) 3-UI/4
Elem:in-range Sélectionne tout élément E de type input dont la valeur fournie se situe dans une fourchette de valeurs prédéfinies 3-UI/4
Elem:out-of-range Sélectionne tout élément E de type input dont la valeur fournie se situe en dehors d’une certaine fourchette de valeurs prédéfinies 3-UI/4
Elem:required Sélectionne tout élément E de type input dont la valeur doit être renseignée (élément possédant un attribut required) 3-UI/4
Elem:optional Sélectionne tout élément E de type input dont la valeur ne doit pas obligatoirement être renseignée 3-UI/4
Elem:not(E1, .c1) Sélectionne tout élément E qui n’est pas de type E1 et qui ne possède pas d’attribut class= »c1″ 3/4
Elem::selection Permet de sélectionner une partie active d’un élément E déjà sélectionnée par l’utilisateur 3/4
Elem >> F Sélectionne tous les éléments F à l’intérieur des éléments E. Ce sélecteur est strictement équivalent au précédent mais représente la nouvelle syntaxe de celui-ci qui sera rendue officielle avec le CSS4. 4
F || E Sélectionne un élément E qui représente une cellule dans un tableau ou dans une grille appartenant à une colonne représentée par un élément F 4
Elem[foo="bar" i] Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » sans tenir compte de la casse (l’utilisation de majuscules / minuscules). Le « i » représente ici « case insensitive » c’est-à-dire « insensible à la casse » en français 4
Elem:any-link Sélectionne tout élément E étant l’ancre d’un lien, que celui-ci ait été cliqué ou non. Utiliser cette pseudo classe est équivalent à utiliser :link et :visited 4
Elem:scope Sélectionne un élément E étant l’élément de référence désigné. 4
Elem:current Sélectionne un élément E actuellement affiché ou lu au sein d’un canvas comportant une dimension temporelle ou l’un de ses parents 4
Elem:current() Alternative à E:current. On va pouvoir passer une liste de sélecteurs en argument de :current(). L’élément sélectionné sera l’élément :current qui correspond au(x) sélecteur(s) passé(s) 4
Elem:past Sélectionne un élément E dont l’affichage précède immédiatement celui de l’élément :current 4
Elem:future Sélectionne un élément E dont l’affichage suit immédiatement celui de l’élément :current 4
Elem:drop Sélectionne un élément E qui peut potentiellement recevoir un objet HTML dans le cadre d’un glissé-déposé (drag and drop) 4
Elem:drop(active) Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser 4
Elem:drop(valid) Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser uniquement si cet élément peut recevoir l’objet qui va y être déposé 4
Elem:drop(invalid) Sélectionne tout élément E qui ne peut pas recevoir l’objet actuellement glissé mais qui pourrait recevoir un autre type d’objet 4
Elem:indeterminate Sélectionne tout élément E de type input qui est dans un état indéterminé, c’est-à-dire ni coché ni non-coché 4
Elem:user-error Sélectionne tout élément E de type input altéré par l’utilisateur et dont la valeur passée est invalide 4
Elem:blank Sélectionne tout élément E ne possédant pas de contenu à part éventuellement des espaces 4
Elem:nth-column(n) Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille 4
Elem:nth-last-column(n) Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille en comptant à partir de la fin 4
:playing Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question est en train d’être joué (ou lu) 4
:paused Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question n’est pas en cours de lecture (en pause, en cours de chargement etc.) 4
Elem:matches(E1, .c1) Sélectionne tout élément E qui est soit de type E1 ou qui possède un attribut class= »c1″ 4
Elem:has(E1, .c1) Sélectionne un élément E si au moins un des sélecteurs passés en paramètre correspond à l’élément (selon la portée, :scope, de l’élément) 4
Elem:dir(ltr) Sélectionne tout élément E dont on à spécifié une direction de lecture « de gauche à droite » (la direction est à priori déterminée par la langue déclarée dans le document. Par exemple, pour le français, ce sera de gauche à droite par défaut) 4
Elem::inactive-selection Permet de sélectionner une partie inactive d’un élément E déjà sélectionnée par l’utilisateur 4
Elem::spelling-error Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme mal orthographiée 4
Elem::grammar-error Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme grammaticalement incorrecte 4
Elem::marker Permet de sélectionner le marqueur de tout élément E dont le type d’affichage est display : list-item (par exemple la puce ou le numéro de l’élément d’un élément li) 4
Elem::placeholder Sélectionne le texte de l’attribut placeholder d’un élément E de type input 4