CSS es una de las herramientas más poderosas disponibles para los diseñadores web. Usándolo podemos cambiar la interfaz de un sitio web en unos minutos sin cambiar las etiquetas de la página. Pero a pesar de que cada uno de nosotros se da cuenta de que es útil, los selectores de CSS están lejos de alcanzar su potencial y, en ocasiones, tendemos a utilizar clases, ids, divs, spans, etc. excesivos e inútiles. Nuestro HTML es muy desordenado.
La mejor manera de evitar que estas "plagas" se propaguen en su marcado y mantenerlo limpio y semántico es usar selectores CSS más complejos que puedan apuntar a elementos específicos sin usar clases o identificadores adicionales, y de esta manera también podemos crear nuestro código . y estilo más flexible .
prioridad CSS
Antes de profundizar en el ámbito de los selectores de CSS avanzados, es importante comprender cómo funcionan las prioridades de CSS para que sepamos cómo usar nuestros selectores de manera adecuada y evitar perder mucho tiempo depurando algo siempre que prestemos atención a las prioridades. para resolver el problema si
Cuando escribimos CSS debemos tener en cuenta que algunos selectores serán más altos que otros selectores en la cascada. El selector que escribimos al final no necesariamente anulará los estilos que escribimos anteriormente en el mismo elemento.
Entonces, ¿cómo se calcula la prioridad de un selector determinado ? Es bastante simple si consideras que las prioridades se expresan como cuatro números separados por comas, como: 1, 1, 1, 1 o 0, 2, 0, 1.
El primer número (a) suele ser 0, a menos que se utilice el atributo de estilo en la etiqueta;
El segundo número (b) es la suma del número de identificadores en este selector;
El tercer número (c) es el total de otros selectores de atributos y pseudoclases utilizados en este selector. Esto incluye clase (.example) y selector de atributos (como li[id=red]);
El cuarto número (d) cuenta elementos (como tabla, p, div, etc.) y pseudoelementos (como: primera línea, etc.);
El selector universal (*) tiene prioridad 0;
Si dos selectores tienen la misma prioridad, el que esté más tarde en la hoja de estilo tendrá efecto.
Veamos algunos ejemplos para que sea más fácil de entender:
#barra lateral h2: 0, 1, 0, 1
h2.título: 0, 0, 1, 1
h2 + p: 0, 0, 0, 2
#barra lateral p:primera línea - 0, 1, 0, 2
En el siguiente ejemplo, el primero funcionará porque tiene mayor prioridad que el segundo:
#barra lateral p#primero {color: rojo} - 0, 2, 0, 1
#barra lateral p:primera línea {color: azul} - 0, 1, 0, 2
Es importante tener al menos una comprensión básica de cómo funcionan las prioridades, pero algunas herramientas como Firebug, cuando inspeccionamos un elemento específico, enumeran todos los pares de selectores CSS en orden de prioridad del selector para hacernos saber cuál está en un elemento específico. Es útil para que los selectores sean válidos.
Le facilita ver qué selector está actuando sobre un elemento.