vagacode

La etiqueta style tiene dos atributos optativos: type (que suele ser text/css) y media que indica el tipo de dispositivo donde se aplicará. Esto es lo usual pero, hay un tercer atributo experimental llamado scoped.

Si agregamos una etiqueta style scoped dentro de otra etiqueta de nuestra página, las reglas de estilo definidas allí se aplicarán sólo al elemento padre.

No es un trabalenguas pero lo parece. Veamos un ejemplo.

Tenemos varias etiquetas p con textos que por defecto se verán de color negro; dentro de ellas hay etiquetas span que también se verán de color negro pero queremos que las del segundo párrafo y sólo esas, se vean de color azul.

Podríamos agregarles un estilo inline a cada una de ellas:

<p>un texto cualquiera <span>de color negro</span></p>
<p>
	este es el párrafo que modificamos
	<span style="color: blue;">color azul</span>
	textos textos textos
	<span style="color: blue;">color azul</span>
</p>
<p>otro texto cualquiera <span>de color negro</span></p>

Pero, también podríamos usar style scoped para modificar el estilo del segundo párrafo de este modo:

<p>un texto cualquiera <span>de color negro</span></p>
<p>
	<style scoped>span {color: blue;}</style>
	este es el párrafo que modificamos
	<span>color azul</span>
	textos textos textos
	<span>color azul</span>
</p>
<p>otro texto cualquiera <span>de color negro</span></p>

Esa regla que hemos agregado, sobrescribe los estilos que hayamos declarado previamente y sólo se aplicará a ese párrafo y ninguno de los otros se verá afectado.

Aunque existen otros métodos para hacer lo mismo tales como usar una clase y definirla al inicio, este nuevo método sigue siendo aceptable porque si se trata de un elemento eventual, que sólo usamos en un lugar, los estilos globales permanecerán limpios.

En CSS, la pseudo-clase :scope es una derivación de lo anterior pero más limitada ya que no nos permite definir reglas diversas sino sólo una que afecta a todos los elementos del contenedor y, si bien aún es experimental, no requiere el uso de prefijos.

Por ejemplo:

<p>un texto cualquiera <span>de color negro</span></p>
<p>
	<style scoped>:scope {color: blue;}</style>
	ahora todo el segundo párrafo se ve de <span>color azul</span>
</p>
<p>otro texto cualquiera <span>de color negro</span></p>

Hará que todos los textos del segundo párrafo se vean de color azul, estén dentro de una etiqueta span o no.