A regra CSS @scope

definição e uso

CSS @scope A regra permite que você selecione elementos dentro de uma subárvore DOM específica.

Através dessa regra @, você pode localizar elementos com precisão, sem precisar escrever um seletor muito específico.

Esta regra @ também reduz a耦合 entre o seletor e a estrutura do DOM.

instância

exemplos 1

Aqui, usamos dois independentes @scope O bloco para coincidir com os elementos <a> das classes .ex1 e .ex2. :scope é usado para selecionar e definir o estilo da escopeta em si. Neste exemplo, a raiz da escopeta é o elemento <div> que aplicou a classe:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

Experimente você mesmo

Veja o seguinte HTML:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Imagem some">
  </div>
</div>

Aqui estão alguns elementos <div> aninhados. Se quisermos aplicar estilos aos elementos <h2> e <img> no parte container/news acima, devemos escrever o seguinte (sem usar @scope):

Exemplo 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

Experimente você mesmo

Usando @scope Regras, você pode localizar elementos de forma precisa sem escrever seletores complexos, conforme mostrado:

Exemplo 3

Aqui, estamos aplicando apenas o .container ao componente .container para os elementos <h2> e <img> como raiz da regra @scope:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Experimente você mesmo

@scope A regra contém uma ou mais conjuntos de regras e pode ser usada de duas maneiras:

• Como bloco independente de CSS, neste caso, ele contém uma parte inicial, incluindo a raiz do escopo e o seletor de restrição de escopo opcional - que definem os limites superior e inferior do escopo.
• Como estilo inline dentro do elemento <style> do HTML, neste caso, a parte inicial é omitida e o conjunto de regras contido será aplicado automaticamente ao elemento pai do <style>.

Exemplo 4

O escopo do donut é aplicado apenas aos elementos entre dois elementos no ancestral da árvore. Este é um exemplo:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Experimente você mesmo

Sintaxe CSS

@scope (Raiz do escopo) {
  Conjunto de regras
}

ou

/* Escopo do donut */
@scope (Raiz do escopo) to (Restrição de escopo) {
  Conjunto de regras
}

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a regra @ pela primeira vez.