Règle @scope de CSS

Définition et utilisation

CSS @scope La règle permet de sélectionner des éléments dans un sous-arbre DOM spécifique.

Avec cette règle @, vous pouvez localiser précisément un élément sans avoir à écrire un sélecteur trop spécifique.

Cette règle @ réduit également la couplage entre le sélecteur et la structure DOM.

Instance

Exemple 1

Ici, nous utilisons deux exemples indépendants @scope Le bloc est utilisé pour correspondre aux éléments <a> des classes .ex1 et .ex2. :scope est utilisé pour sélectionner et définir le style de l'objet d'origine. Dans cet exemple, l'objet d'origine est l'élément <div> qui a appliqué la 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;
  }
}

Essayez-le vous-même

Voyez le HTML suivant :

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

Voici quelques éléments <div> imbriqués. Si nous voulons définir des styles pour les éléments <h2> et <img> dans la partie container/news, nous devons écrire ce qui suit (sans utiliser @scope) :

Exemple 2

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

Essayez-le vous-même

Utilisez @scope Les règles, vous permettent de localiser précisément les éléments sans avoir à écrire des sélecteurs trop complexes, comme dans l'exemple suivant :

Exemple 3

Ici, nous définissons .container comme la racine de portée de la règle @scope pour les éléments <h2> et <img> dans le composant .container :

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

Essayez-le vous-même

@scope Les règles contiennent une ou plusieurs ensembles de règles et peuvent être utilisées de deux manières :

• En tant que bloc indépendant de CSS, dans ce cas, il contient une partie préliminaire, y compris la racine de portée et le sélecteur de limitation de portée optionnel - qui définissent les bornes supérieure et inférieure de la portée.
• En tant que style en ligne dans l'élément <style> de HTML, dans ce cas, la partie préliminaire est omise et l'ensemble des règles inclus est appliqué automatiquement au parent de l'élément <style>.

Exemple 4

La portée de donut s'applique uniquement aux éléments situés entre deux éléments dans l'arbre des ancêtres. Voici un exemple :

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

Essayez-le vous-même

Syntaxe CSS

@scope (Racine de portée) {
  Ensemble de règles
}

ou

/* Portée de donut */
@scope (Racine de portée) to (Limitation de portée) {
  Ensemble de règles
}

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette règle @.