Pseudo-classes
==============

Une **pseudo-classe** est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe `:hover`, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).


```css
div:hover {
  background-color: #f89b4d;
}
```


Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec `:visited` ; le statut du contenu avec `:checked` ; la position de la souris `:hover`).

**Note :** À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.

Syntaxe
-------
```

sélecteur:pseudo-classe {
  propriété: valeur;
}
```


À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.

Liste des pseudo-classes standards
----------------------------------

* `:active`
* `:any-link` 
Expérimental
* `:blank` 
Expérimental
* `:checked`
* `:current` 
Expérimental
* `:default`
* `:defined`
* `:dir()` 
Expérimental
* `:disabled`
* `:drop` 
Expérimental
* `:empty`
* `:enabled`
* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen` 
Expérimental
* `:future` 
Expérimental
* `:focus`
* `:focus-visible` 
Expérimental
* `:focus-within`
* `:has()` 
Expérimental
* `:host`
* `:host()`
* `:host-context()` 
Expérimental
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is` 
Expérimental
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:local-link` 
Expérimental
* `:not()`
* `:nth-child()`
* `:nth-col()` 
Expérimental
* `:nth-last-child()`
* `:nth-last-col()` 
Expérimental
* `:nth-last-of-type()`
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:past` 
Expérimental
* `:placeholder-shown` 
Expérimental
* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`
* `:scope`
* `:target`
* `:target-within` 
Expérimental
* `:user-invalid` 
Expérimental
* `:valid`
* `:visited`
* `:where()` 
Expérimental
Exemples
--------

### CSS


```css
.survol:hover {
  background-color: palegreen;
}

p:nth-child(2n + 1) {
  background-color: lime;
}
```

### HTML


```html
<div>
  <p class="survol">
    La Reine devint pourpre de colère&nbsp;; et après l’avoir considérée un
    moment avec des yeux flamboyants comme ceux d’une bête fauve, elle se mit à
    crier&nbsp;: «&nbsp;Qu’on lui coupe la tête&nbsp;!&nbsp;»
  </p>
  <p>
    «&nbsp;Quelle idée&nbsp;!&nbsp;» dit Alice très-haut et d’un ton décidé. La
    Reine se tut.
  </p>
  <p>
    Le Roi lui posa la main sur le bras, et lui dit timidement&nbsp;:
    «&nbsp;Considérez donc, ma chère amie, que ce n’est qu’une enfant.&nbsp;»
  </p>
</div>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

Voir aussi
----------

* Les pseudo-éléments