Les pseudo-classes :open et :closed

:open
:closed

Résumé des caractéristiques du sélecteur :open

Description rapide
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
Statut
Problèmes de compatibilité ⚠
Module W3C
Sélecteurs
Références (W3C)
Statut du document: WD (document de travail)

Description de la pseudo-classe :open.

La pseudo-classe :open cible les éléments ouverts. Elle s'applique seulement à quelques éléments HTML, ceux qui peuvent être dans un état ouvert ou fermé : les listes select, les éléments details ou encore les zones de saisie qui comportent un accessoire pour faciliter la saisie, par exemple les zones de date.

Quelques exemples d'utilisation.

 
Cette ligne de résumé est toujours visible. Le corps du texte ne s'affiche que lorsque l'internaute clique sur le petit triangle à gauche du résumé.
Les styles appliqués à cet élément lui donne un arrière-plan bleu clair.
 
Date de naissance :
 
Couleur :

Exemples d'utilisation de la pseudo-classe :open.

Stylisation d'une boite de dialogue ouverte.

Les boites de dialogue (balise dialog de HTML) ont également un était fermé et un état ouvert. Il est donc possible d'utiliser la pseudo-classe :open pour appliquer des styles particulier lorsque la boîte est affichée.

Exemple avec dialog.

Appuyez sur la touche Echap pour fermer cette boite.

Palier au manque de compatibilité avec :closed.

La pseudo-classe :closed, après avoir été largement discuté au W3C, n'est finalement pas standardisée (2026). Mais ce n'est pas grave puisque :not(:open) est équivalent. Voici un exemple qui colorie l'arrière-plan en rose lorsque l'élément est fermé, et en jaune lorsqu'il est ouvert.

Résumé.
Texte détaillé pouvant comporter plusieurs lignes.

Compatibilité des navigateurs.

La pseudo-classe :open commence a être bien reconnue par les navigateurs (2025). Il n'en est pas de même pour la pseudo-classe :closed. Ceci s'explique par le fait que cette dernière est équivalente à :not(:open).

Colonne 1
Prise en charge par les navigateurs de la pseudo-classe :open les éléments qui peuvent être soit ouverts, soit fermés, et qui sont actuellement ouverts.
Colonne 2
Prise en charge par les navigateurs de la pseudo-classe :closed qui cible les éléments qui peuvent être soi ouverts, soit fermés et qui sont actuellement fermés.

Remarques :

(1) La pseudo-classe est reconnue (ne déclenche pas d'erreur) mais n'a pas d'effet.

1
Pseudo-classe
:open
2
Pseudo-classe
:closed
Estimation de la prise en charge globale.
75%
1%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

1
1

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique des pseudo-classes :open et :closed.

  • Sélecteurs - Niveau 4

    Concernant :open. Introduction de la pseudo-classe :open dans ce niveau de la spécification.
    La pseudo-classe :closed n'est pas définie.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi : pseudo-classes relatives à l'état d'affichage.

Les pseudo-classes ci-dessous permettent de désigner un élément en fonction de son mode d'affichage : plein-écran, dans une fenêtre séparée, etc.

::backdrop
Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.
:closed
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).
:fullscreen
Pseudo-classe désignant les éléments affichés en plein écran pendant le temps où ils sont affichés en plein écran.
:modal
Pseudo-classe désignant les éléments affichés en modal : qui bloquent les interactions avec les autres éléments.
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
⚠
:picture-in-picture
Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.
:popover-open
Pseudo-classe qui cible les éléments popover qui sont dans l'état ouvert (ou affichés).