Jerarquía de especificidad en CSS | Explicado
La especificidad en CSS determina el orden de los selectores CSS que se aplicarán a un elemento. Por ejemplo, un elemento puede estar influenciado por varios estilos CSS y, por lo tanto, sería un desafío ajustarse a un estilo. El concepto de especificidad ha facilitado el proceso de decidir qué propiedad CSS seleccionar para un elemento. Para hacerlo, se sigue una jerarquía de especificidad que define un orden de selectores CSS de acuerdo con la puntuación de especificidad.
Este artículo proporciona una visión profunda de la jerarquía de especificidad con los siguientes resultados de aprendizaje:
- Jerarquía de especificidad en CSS
- Cómo calcular la puntuación de la jerarquía de especificidad
Jerarquía de especificidad en CSS
La jerarquía de especificidad es el ingrediente clave para practicar la especificidad. La jerarquía de especificidad se refiere a las categorías de selectores CSS y su orden de ejecución en CSS. Los siguientes cuatro grupos se refieren
Estilos en línea: La propiedad de estilo utilizada dentro del elemento y la especificidad de los estilos en línea es mayor que todos los demás grupos.
Identificador (ID): El atributo de identificación de un elemento y la especificidad es un paso después de los estilos en línea.
Clases, pseudo clases, atributos: Este grupo contiene las clases, las clases de pseudo (como: Link ,: Active ,: Focus) y otros atributos. El nivel de especificidad de este grupo es un paso hacia abajo a partir del grupo de identificadores.
Elementos, pseudo elementos: Este grupo contiene elementos (P, H1, div) y pseudo elementos (:: antes, :: después) . La especificidad de este grupo está en el nivel más bajo.
Cómo calcular la puntuación de la jerarquía de especificidad
Detrás del concepto de jerarquía de especificidad, existe un cálculo matemático que lleva a cuantificar la especificidad y priorizar el selector CSS en función de esa puntuación. La puntuación se puede calcular siguiendo el punto de referencia que se proporciona a continuación.
| Selector de CSS | Puntaje de jerarquía de especificidad |
|---|---|
| Estilos en línea | 1000 |
| Identificador (ID) | 100 |
| Clase, pseudo clases, atributos | 10 |
| Elemento, pseudo elemento | 1 |
Ejemplo 1: selectores CSS
El siguiente código practica varios selectores CSS en un solo elemento para comprender el proceso de jerarquía de especificidad en CSS.
Html
Linuxhint! Un valle de tutoriales
CSS
En el código CSS anterior, tres selectores intentan cambiar el color de fondo del elemento H3. El primer selector usa el nombre del elemento, mientras que el segundo y tercer selectores ejerce la clase y la ID del elemento H3.
Producción
Como la especificidad del identificación es mayor que el clase y el elemento, Por lo tanto, la identificación se utilizaría como selector de CSS.
Ejemplo 2: Uso de selectores CSS híbridos
Puede haber un caso en el que tenga que definir clases con los mismos nombres. En dicho escenario, los selectores híbridos se ejercen para identificar de manera única un elemento específico. El siguiente ejemplo usa el identificación y clase Para crear un selector híbrido.
Html
Linuxhint! Un valle de tutoriales
Tutoriales sobre HTML, CSS, Java, JQuery y JavaScript
Bienvenido a Linuxhint
Un proveedor de contenido de calidad
En el código anterior, dos DIV se crean y cada div ha H3 con class = "especificador" y P con class = "Spec1". elementos.
CSS
En el CSS anterior, el #New .La especificación se refiere al elemento H3 del Div id = "nuevo" mientras que el .La especificación se refiere a todos los elementos que tienen class = "especificación".
Teniendo en cuenta los cálculos, el "#nuevo ".especificación "y".Especificaciones" tener el siguiente puntaje.
- #nuevo .Spec = 100+10 = 110
- .especificación = 10
Producción
Desde la salida se observa que el selector CSS "#Div .Especificaciones" se ha cargado ya que su especificidad es mayor que ".Especificaciones".
Conclusión
La jerarquía de especificidad establece el orden de los selectores CSS, el selector con una puntuación de especificidad más alta tiene una prioridad más alta en comparación con el selector que tiene una puntuación de especificidad más baja. En este artículo, hemos demostrado el concepto de jerarquía de especificidad y describimos los conceptos básicos de cómo se define la jerarquía de especificidad. Los estilos en línea tienen la puntuación de especificidad más alta y, por lo tanto, se colocan en la parte superior del árbol de jerarquía de especificidad, seguido de ID, clases y elemento. Además, también hemos proporcionado el método para calcular la puntuación de especificidad de los selectores CSS.