Pseudo Classe CSS :scope

La pseudo-classe CSS :scope représente les éléments qui sont un point de référence pour faire correspondre les sélecteurs.

Le :scope est le même que :root, car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte.

L'élément scope est un élément qui forme un contenu pour un bloc de styles.

Version

Selectors Level 4

Syntaxe

:scope {
  css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .container {
      margin: 40px auto;
      max-width: 700px;
      background-color: #eeeeee;
      padding: 20px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
      padding: 30px;
      }
      :scope {
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :scope</h2>
    <div class="container">
      <section>
        <p>
          Dans le scope.
        </p>
      </section>
      <p>
        Hors de scope.
      </p>
    </div>
  </body>
</html>

Support de Navigateurs

27.0+ 32.0+ 7.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées