Sélecteurs CSS

Les sélecteurs CSS permettent de cibler sur quels éléments appliquer les règles CSS.

Les classes et ID doivent décrire le contenu (ex: header) et non le style (ex: bigText).
Chaque ID est unique par page, ne contient ni espace ni caractère spécial, et est sensible à la casse

<p id="myid" class="myclass">Lorem ipsum...</p>

Les sélecteurs

De base


p	Les tags <p>	[CSS1]
.myclass	Les élements ayant la classe "myclass"	[CSS1]
#myid	L'élément ayant l'id "myid"	[CSS1]

*	Tous les éléments	[CSS2]
h1, h2	Les tags <h1> et <h2>	[CSS1]

Les sélecteurs peuvent être combinés pour affiner la sélection.
Par exemple: p.myclass pour cibler les tags <p> qui ont la classe myclass.

De précédence


div p	Les tags <p> contenus dans un tag <div>	[CSS1]
div > p	Les tags <p> dont le parent direct est un <div>	[CSS2]
div + p	Les tags <p> dont l'élément précédent est un <div> (Adjacent Sibling)	[CSS2]
div ~ p	Les tags <p> qui sont précédés d'un <div> - pas forcemment immédiatement (Sibling)	[CSS3]

D’attribut


input[readonly]	Les input qui ont un attribut "readonly"	[CSS2]
input[type=password]	Les input qui ont un attribut "type" qui vaut "password"	[CSS2]
div[data-config~=on]	Les divs dont l'attribut "data-config" est une liste de valeurs séparées par un espace, dont l'un des mots vaut exactement "on"	[CSS2]
span[class\|=btn]	Les spans dont l'attribut "class" est une liste de valeurs séparées par un tiret, dont l'un des mots vaut exactement "btn"	[CSS2]

a[src^=https]	Les liens dont l'attribut "src" commence par "https"	[CSS3]
a[src$=.pdf]	Les liens dont l'attribut "src" finit par ".pdf"	[CSS3]
a[src*=w3schools]	Les liens dont l'attribut "src" contient "w3schools"	[CSS3]

Spécificité des sélecteurs

Héritage

Si deux sélecteurs ciblent le même élément, les déclarations se cumulent.
Exemple: les paragraphes qui ont la classe “myclass” ont la police “Arial” et la couleur “gray”

p {
  font-family: Arial;
}
p.myclass {
  color: gray;
}

Score

Si une même propriété est définie deux fois, alors le sélecteur le plus spécifique l’emporte.
Un ID a une spécificité de 100, une classe 10, un tag 1 — plus le score est élevé, plus il est spécifique.

Sélecteur	ID	Classe	Tag	Score total
body	0	0	1	1
.quote	0	1*10	0	10
#content	1*100	0	0	100
div p	0	0	2	2
#sidebar p	1*100	0	1	101

Exemple: les paragraphes qui ont l’ID “myid” et la classe “myclass” ont la couleur “red”

p {
  color: black;
}
#myid {
  color: red;  /* l'emporte */
}
p.myclass {
  color: gray;
}

En cas de match nul, que les deux sélecteurs ont le même score:
- 1/ Le CSS inline (style="...") l’emporte sur
- 2/ Le CSS embedded <style>...</style> qui l’emporte sur
- 3/ Le CSS external (<link rel="stylesheet" ...)
- 4/ En dernier recours, si aucun de ces cas ne s’applique, la dernière règle déclarée l’emporte

!important

On peut passer outre la spécificité / l’ordre d’inclusion en utilisant le flag !important: une propriété notée importante remplace les autres déclarations de cette propriété sur l’élément. Ainsi, on peut écraser un style en ligne dans un fichier externe avec le suffixe !important.

p { color: lightgrey !important; }

Pseudo-classes

Les pseudo-classes permettent de cibler un élément dans un état particulier. Elles s’ajoutent au sélecteur en suffixe.

/* CSS des liens lorsque la souris passe dessus */
a:hover { color: red; }

Sur les liens


a:link	Les liens non visités	[CSS1]
a:visited	Les liens visités	[CSS1]
a:hover	Le lien sous la souris	[CSS1]
a:active	Le lien actif (= état au moment du clic)	[CSS1]
a:focus	Le lien ayant le focus (= état après le clic, avant que l'utilisateur clique ailleurs)	[CSS2]
div:target	Div est la cible de l'adresse en cours (http://localhost#myid) Exemple :target	[CSS3]

Sur les input


input:focus	Input ayant le focus	[CSS2]
input:checked	Input coché (radio ou checkbox)	[CSS3]
input:default + label	Label de l'input par défaut Exemple :default	[CSS3]

input:disabled	Input désactivé (= ayant l'attribut "disabled")	[CSS3]
input:enabled	Input activé (= n'étant pas désactivé)	[CSS3]
input:read-only	Input non éditable (= ayant l'attribut "readonly")	[CSS3]
input:read-write	Input éditable (= n'étant pas en read-only)	[CSS3]
input:required	Input obligatoire (= ayant l'attribut "required")	[CSS3]
input:optional	Input optionnel (= dont la valeur n'est pas obligatoire)	[CSS3]
input:indeterminate	Input dont l'état est indéterminé (= checkbox ayant l'attribut "indeterminate")	[CSS4]

input:invalid	Input invalide (= qui ne passe pas la validation HTML5, ex required, pattern, min, max)	[CSS3]
input:valid	Input valide	[CSS3]
input:out-of-range	Input hors plage (= input de type number dont la valeur ne respecte pas min ou max)	[CSS3]
input:in-range	Input dans la plage	[CSS3]

Sur tout type d’élément


:not(p)	Tout élément qui n'est pas un <p> (marche avec tous les sélecteurs)	[CSS3]
:lang(en)	Element dont l'attribut "lang" commence par "en"	[CSS2]
p:empty	<p> n'ayant aucun enfant (TextNode y compris donc pas même un retour à la ligne !)	[CSS3]
:root	Element racine de la page (= tag <html> pour une page HTML)	[CSS3]
:dir(rtl)	Element dont la direction du texte est de droite à gauche	[CSS4]
:fullscreen	Element affiché en plein écran	[CSS3]

Sur tout type d’élément, selon sa position


p:first-child	<p> étant le premier enfant de son parent	[CSS2]
p:last-child	<p> étant le dernier enfant de son parent	[CSS3]
p:only-child	<p> étant le seul enfant de son parent	[CSS3]
span:first-of-type	<span> qui est le premier <span> de son parent	[CSS3]
span:last-of-type	<span> qui est le dernier <span> de son parent	[CSS3]
span:only-of-type	<span> qui est le seul <span> de son parent	[CSS3]

li:nth-child(2)	⁽¹⁾ Le 2ème <li>	[CSS3]
li:nth-last-child(2)	⁽¹⁾ Le 2ème <li> à partir de la fin (= avant-dernier)	[CSS3]
div:nth-of-type(2)	⁽¹⁾ Le 2ème élément de type <div> de son parent	[CSS3]
div:nth-last-of-type(2)	⁽¹⁾ Le 2ème <div> de son parent à partir de la fin	[CSS3]

⁽¹⁾ accepte des valeurs non numériques :


li:nth-child(2)	Le 2ème élément
li:nth-child(even)	Les éléments pairs (2ème,4ème,...)
li:nth-child(odd)	Les éléments impairs (1er,3ème,...)
li:nth-child(3n)	Les éléments multiples de 3 (3ème,6ème,...)
li:nth-child(3n+1)	Les éléments dont la position modulo 3 vaut 1 (1er,4ème,7ème,...)

Pseudo-éléments

Les pseudo-éléments permettent de cibler une portion d’élément.

p::first-letter { font-size:2em; line-height:1em; }


p::first-letter	Première lettre du <p>	[CSS1]
p::first-line	Première ligne du <p>	[CSS1]
p::selection	Portion de texte sélectionnée par l'utilisateur à l'intérieur du <p>. Propriétés autorisées	[CSS3]
::placeholder	Placeholder d'un input. Propriétés autorisées	[CSS4]

div::before	Début du div ⁽¹⁾	[CSS2]
div::after	Fin du div ⁽¹⁾	[CSS2]

::cue	Sous-titres des vidéos	[CSS3]

⁽¹⁾ Before et after permettent d’insérer du texte au début ou à la fin d’un élément - on peut s’en servir pour ajouter du texte, des icônes, ajouter un clear float, un calque en position absolue, etc.

nav li:not(:first-child)::before {
  content: " / ";
  color: grey;
}

CSS level 4

Les spécifications stipulent également des sélecteurs niveau 4.
Mais la plupart sont peu voire pas du tout supportés.

Intriguing CSS Level 4 Selectors

This site is open source. Improve this page.