Header Ads Widget

Ticker

6/recent/ticker-posts

CSS: selector de raíz (frente a html) por ejemplo

 El :rootselector en CSS le permite hacer coincidir el elemento de nivel más alto de su documento (o la raíz del documento). En el caso de HTML, esto equivale a usar el htmlselector para seleccionar el <html>elemento, con la excepción de que el :rootselector tiene una especificidad más alta ( :rootes un selector de pseudo-clase que tiene una especificidad igual a un selector de clase).

CSS no es solo para diseñar documentos HTML. Se puede usar con otros lenguajes de documentos, como SVG y XML; la :rootpseudoclase, en este caso, se refiere a diferentes elementos.

Podemos usar el :rootselector de pseudo-clases que se puede usar como cualquier otro selector. Por ejemplo:

:root {
  background: hsl(0, 100%, 50%);
  color: blue;
}

Esto aplicará los estilos CSS al <html>elemento.

El :rootselector contra el htmlselector

La principal diferencia entre :roothtmles que :root(que es un selector de pseudo-clases) tiene una especificidad más alta que html(wihc es un selector de tipo). Consideremos este pequeño ejemplo:

:root {
  background-color: white;
}
html {
  background-color: black;
}

Usar :rootcon variables CSS (propiedades personalizadas)

El :rootselector anula el htmlselector. El color del fondo será blanco, no negro.

Un uso útil del :rootselector es declarar variables CSS de alcance global o propiedades personalizadas. Por ejemplo:

:root { --bg-color: hsl(120, 100%, 50%); }

La --bg-colorpropiedad personalizada está disponible en el ámbito global. Eso significa --bg-colorque se hsl(120, 100%, 50%);puede acceder a su valor desde cualquier otro elemento DOM. Podemos usar la var()función para obtener el valor:

#main{
    background-color: var(--bg-color);
}

El color del fondo será hsl(120, 100%, 50%);.

Referencias

Publicar un comentario

0 Comentarios