Un elemento de alcance forma un contexto para un bloque de estilos. Ese elemento proporciona un punto de referencia para comparar los selectores. Un elemento de ámbito se define utilizando el atributo de ámbito. Los estilos declarados con atributos de ámbito se aplicarán a todos los elementos dentro de su elemento principal.
Sintaxis:
:scope
Ejemplo 1:
<!DOCTYPE html>
<html>
<title>GeeksforGeeks</title>
<body>
<h1 style="text-align: center;
color: green;" id="paragra">
Welcome to GeeksforGeeks.
It's a Computer Science portal.
</h1>
<p style="color: #000; text-align: center;"
id="opt">
</p>
<script>
let para =
document.getElementById("paragra");
let opt =
document.getElementById("opt");
if (para.matches(":scope")) {
opt.innerText =
"Yeah!!, we are under scope GeeksforGeeks";
}
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>GeeeksforGeeks</title>
<style>
#contains {
margin: 5% auto;
max-width: 500px;
background-color: #eeeeee;
}
section {
padding: 60px;
}
:scope {
background-color: #3cd33c;
}
</style>
</head>
<body>
<div id="contains">
<section>
<p>
Inside the scope,
<span style="color: green;">
GeeksforGeeks
</span>
</p>
</section>
</div>
</body>
</html>
Producción:
Soporte del navegador:
- Cromo
- Firefox
- Ópera
- Safari
- Borde
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA