La pseudo-classe CSS :scope
La pseudo-classe CSS :scope représente l'élément de référence pour les sélecteurs, tel que l'élément racine dans un Shadow DOM ou l'élément passé à querySelector().
Elle est couramment utilisée dans les requêtes DOM JavaScript pour limiter la correspondance des sélecteurs à une sous-arborescence spécifique. Notez que l'attribut <style scoped> déprécié n'est plus pris en charge dans les navigateurs modernes, mais :scope reste pertinent pour les requêtes DOM.
Version
Syntaxe
Syntaxe CSS :scope
css
:scope {
css declarations;
}Exemple du sélecteur :scope :
Exemple de code 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>Practice
À quoi fait référence la portée en CSS ?