Especificidad en CSS
CSS se puede aplicar a cualquier elemento por múltiples maneras (en línea, interna y externa). ¿Qué pasa si aplicamos estilos al mismo elemento por diferentes medios (usando en línea, usando ID o clase, etc.)? En tal caso, el fenómeno de especificidad CSS entra en práctica y elige el selector de CSS que tiene el mayor valor de especificidad. El concepto de especificidad es como la precedencia del operador en los lenguajes de programación.
Teniendo en cuenta la importancia de la especificidad, esta guía demuestra brevemente el trabajo y el uso de la especificidad en CSS.
- Cómo funciona la especificidad CSS
- Valor de especificidad de los selectores CSS
Cómo funciona la especificidad en CSS
El funcionamiento de la especificidad depende de los selectores CSS o el tipo de CSS que está utilizando. Esta sección considera la comparación de especificidad de las siguientes maneras:
- CSS en línea, CSS interno y CSS externo
- Selectores CSS (ID, clase, Pseudo Clases, Pseudo Elementos, etc.)
La hoja de estilo puede ser en línea, interna o externa y el siguiente es el nivel de especificidad de estas hojas de estilo.
CSS en línea> CSS interno> CSS externoDe la ecuación anterior, se concluye que el CSS en línea tiene la mayor especificidad en comparación con el CSS interno y externo.
Ahora, exploremos cómo se eligen los estilos si hay varios selectores CSS para el mismo elemento. La especificidad de varios selectores CSS se define mediante la siguiente ecuación.
Inline> Identificador (id)> clases/pseudo-clases, atributos> Elementos/pseudo elementosHasta ahora, la comparación teórica se ha retirado. Tengamos alguna comparación cuantitativa de la puntuación de especificidad y los navegadores calculan este puntaje de especificidad de la siguiente manera.
Para hacerlo, se aplican los conceptos de conteo de decenas, decenas y miles de contabilidad en los selectores CSS para obtener un valor específico. De tal manera, se asigna el selector de menor especificidad (elemento) 1 y se asigna al selector de especificidad más alta (en línea) 1000. La siguiente tabla se refiere a la puntuación de especificidad de varios selectores CSS.
| Selector de CSS | Especificidad |
|---|---|
| En línea | 1000 |
| Identificador (ID) | 100 |
| Clases, pseudo-clases, atributos | 10 |
| Elementos/pseudo elementos | 1 |
Hemos practicado algunos ejemplos que se retiran del concepto proporcionado en la tabla anterior.
| Selectores CSS | Ejemplo | Valor de especificidad |
|---|---|---|
| En línea | 1000 | |
| Elemento con ID | H1#ID | 100+1 = 101 |
| Elemento con clase | H1.clase | 10+1 = 11 |
| Elemento | H1 | 1 |
| Elemento con identificación y clase | H1#ID.clase | 1+100+10 = 111 |
| Múltiples clases | .clase 1.clase 2 | 10+10 = 20 |
Con la ayuda de la información proporcionada en las tablas anteriores, habría entendido mejor el concepto de especificidad en CSS. Vamos a allanarlos usando los siguientes ejemplos
Ejemplo 1: Uso de múltiples selectores CSS para un elemento
Este ejemplo practica varios selectores CSS para diseñar el elemento "P".
Html
Usando el concepto de especificidad
En el código HTML anterior, se asigna el párrafo id = "uno" y class = "especificador".
CSS
En el CSS anterior, el "Clase", "ID" y "Elemento" se utilizan como selectores CSS para "pag". Cada selector de CSS tiene la intención de cambiar el color de fondo del "pag" elemento.
Producción
De la salida, se observa que el color de fondo es azul cielo, que fue establecido por el id = "uno" del elemento "P".
Ejemplo 2: Uso de selectores de la misma especificidad
Existe la posibilidad de que los selectores de CSS se puedan abordar un elemento que tienen la misma puntuación de especificidad. En tal caso, se considera la aparición del selector CSS, y el selector posterior se elige para el estilo.
Este ejemplo demuestra el mismo escenario utilizando el siguiente código.
Html
Uso de los selectores que tienen la misma especificidad
CSS
En el código CSS anterior, se utilizan dos selectores de identificación con diferentes estilos. El #spec que ocurre anteriormente tiene solo propiedad de color de fondo, mientras que el #Especificaciones que ocurre más tarde tiene múltiples propiedades CSS.
Producción
Desde la salida, se observa que el id = "especificación" El selector que ocurre lateralmente se selecciona y las propiedades contenidas por él se aplican al elemento de párrafo.
Conclusión
Siempre que múltiples selectores CSS intentan influir en un elemento, el fenómeno de la especificidad decide qué estilo se aplicará. La especificidad en CSS tiene el papel clave como hojas de estilo complejas puede contener múltiples selectores para cada elemento. Este artículo demuestra el concepto de especificidad en CSS. Además, también sabría cómo se calcula el puntaje de especificidad de un selector CSS. Con la ayuda de esto, podrá calcular la puntuación de especificidad antes de usar cualquier selector de CSS.