CSS pseudo-clase :scope

La pseudo-clase CSS :scope representa el elemento de referencia para selectores, como el elemento raíz en un Shadow DOM o el elemento pasado a querySelector().

Se utiliza comúnmente en consultas del DOM de JavaScript para limitar la coincidencia de selectores a un subárbol específico. Tenga en cuenta que el atributo <style scoped> (ya en desuso) ya no es compatible con los navegadores modernos, pero :scope sigue siendo relevante para las consultas del DOM.

Versión

Selectors Nivel 4

Sintaxis

Sintaxis de CSS :scope

css

:scope {
  css declarations;
}

Ejemplo del selector :scope:

Ejemplo de código CSS :scope

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
    <script>
      const container = document.querySelector('.container');
      const scopeElement = container.querySelector(':scope > section');
      scopeElement.style.backgroundColor = '#1c87c9';
      scopeElement.style.color = '#fff';
    </script>
  </body>
</html>

Try it Yourself »

Practice

¿A qué se refiere el scope en CSS?

El scope en CSS se refiere a la parte del código donde una variable o función puede ser accedida.El scope en CSS se refiere a los estilos que solo están disponibles dentro del bloque de código en el que se declaran.El scope en CSS se refiere al tamaño de la pantalla de visualización de la página web.El scope en CSS se refiere a los límites establecidos en la cantidad de datos que se pueden transferir en un sitio web.

CSS pseudo-clase :scope ​

Versión ​

Sintaxis ​

Ejemplo del selector :scope: ​

Practice ​

CSS pseudo-clase :scope

Versión

Sintaxis

Ejemplo del selector :scope:

Practice