Sélecteurs CSS

1. Sélecteurs de base

p { ... }          /* par balise */
.btn { ... }       /* par classe */
#header { ... }    /* par ID */
  

2. Sélecteurs combinés

button.primary { ... }   /* élément avec classe */
h1, h2, h3 { ... }       /* plusieurs sélecteurs */
  

3. Sélecteurs hiérarchiques

nav a { ... }      /* descendant */
ul > li { ... }    /* enfant direct */
h2 + p { ... }     /* frère direct */
h2 ~ p { ... }     /* frères suivants */
  

4. Sélecteurs d’attributs

input[required] { ... }          /* présence d’attribut */
input[type="email"] { ... }      /* valeur exacte */
a[href^="https"] { ... }         /* commence par */
img[src$=".png"] { ... }         /* finit par */
div[class*="card"] { ... }       /* contient */
  

5. Pseudo-classes

a:hover { ... }
a:active { ... }
a:focus { ... }

li:first-child { ... }
li:last-child { ... }
li:nth-child(2) { ... }

input:checked { ... }
input:disabled { ... }
  

6. Pseudo-éléments

p::before { ... }
p::after { ... }
p::first-letter { ... }
p::first-line { ... }
  

7. Résumé rapide

Balise        →   div
Classe        →   .box
ID            →   #main
Descendant    →   ul li
Enfant direct →   ul > li
Attribut      →   input[type="text"]
Pseudo-classe →   a:hover
Pseudo-élément→   p::after