souris
souris
animation

burger
back

Cheat Sheet – Les sélecteurs CSS.

Basiques
Nom Sélecteur
Universel * Sélectionne tous les éléments.  a b c d
Type div Sélectionne les éléments de ce type.  a div c div
Classe .c Sélectionne les éléments avec cette classe.  .a .b .c .d
ID #a Sélectionne les éléments avec cet id.  .#c #d #a #b
Combinations
Nom Sélecteur
Descendant div a Sélectionne les éléments qui sont descendants du premier élément.  div
a b
a c a d
Enfant direct div > a Sélectionne les enfants directs du premier élément.  div
a b
a c a d
Sibling général div ~ a Sélectionne les éléments qui sont frères et sœurs du premier élément et viennent après le premier élément.  a div a a
Sibling adjacent div + a Sélectionne les éléments qui sont frères et sœurs du premier élément et viennent directement après le premier élément.  a div a a
Ou div, a Sélectionne les éléments qui correspondent à n'importe quel sélecteur dans la liste.  a div a b
Et div.c Sélectionne les éléments qui correspondent à la combinaison des sélecteurs.  .a div.c .c div
Attributs
Nom Sélecteur
Possèdant [a] Sélectionne les éléments qui ont cet attribut.  [a] [a=”1”] [b] c
Exactement comme [a=”1”] Sélectionne les éléments qui ont cet attribut avec exactement cette valeur.  [a] [a=”1”] [b] c
Commence par [a^=”1”] Sélectionne les éléments qui ont cet attribut qui commence par cette valeur.  [a=”12”] [a=”21”]
Se termine par [a$=”1”] Sélectionne les éléments qui ont cet attribut qui se termine par cette valeur.  [a=”12”] [a=”21”]
Sous-chaîne [a*=”3”] Sélectionne les éléments qui ont cet attribut et qui contient cette valeur, n'importe où.  [a=”37”] [a=”73”]
Pseudo éléments
Nom Sélecteur
Avant que div::before Crée un élément vide directement devant les enfants de l'élément sélectionné.  div
before a after
Après div::after Crée un élément vide directement après les enfants de l'élément sélectionné.  div
before a after
Pseudo Classes
Nom Sélecteur
Hover button:hover Sélectionne les éléments qui sont en hover par la souris. 
Focus button:focus Sélectionne les éléments qui sont en focus par la souris. 
Obligatoire input:required Sélectionne les entrées obligatoires. 
Vérifié input:checked Sélectionne les cases à cocher/radio boutons cochés. 
Désactivé input:disabled Marque les entrées qui sont désactivées. 
Premier enfant a:first-child Sélectionne les éléments qui sont premiers enfants à l'intérieur d'un conteneur.  div - div
a b - b a
Dernier enfant a:last-child Sélectionne les éléments qui sont derniers enfants à l'intérieur d'un conteneur.  div - div
b a - a b
Nième enfant a:nth-child(2n) Sélectionne les éléments qui sont nièmes enfants à l'intérieur d'un conteneur basé sur la formule demandée.  div
a a b a
Nième dernier enfant a:nth-last-child(3) Sélectionne les éléments qui sont nièmes enfants à l'intérieur d'un conteneur basé sur la formule demandée, comptant à partir de la fin.  div
a a b a
Enfant unique a:only-child Sélectionne les éléments qui sont enfants uniques à l'intérieur d'un conteneur.  div - div
a b a
Premier de ce type a:first-of-type Sélectionne les éléments qui sont premiers de leur type à l'intérieur d'un conteneur.  div
b a a b
Dernier de ce type a:last-of-type Sélectionne les éléments qui sont derniers de leur type à l'intérieur d'un conteneur.  div
b a a b
Nième de ce type a:nth-of-type(2n) Sélectionne les éléments qui sont nièmes de leur type à l'intérieur d'un conteneur, basé sur la formule demandée.  div
b a a b
Nième dernier de ce type a:nth-last-of-type(2) Sélectionne les éléments qui sont nièmes de leur type à l'intérieur d'un conteneur, basé sur la formule et comptant à partir de la fin.  div
b a a b
Seul de ce type a:only-of-type Sélectionne les éléments qui sont les seuls de leur type à l'intérieur d'un conteneur.  div
b b a b
Not a:not(.c) Cible les éléments qui ne sont pas représentés par cet argument. Ici contient tous les a sauf ceux avec la classe c.  b a.c a a.z
Kyle Cook
Kyle Cook
Kyle Cook
Kyle Cook
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer.