Conquista los selectores CSS avanzados

Autor：Eve Cole Fecha de actualización：2009-09-07 21:27:44

Artículo original: Conquer Selectores CSS avanzados
Traducido de:Domar selectores CSS avanzados

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 estas plagas en sus etiquetas y mantenerlas concisas y semánticas 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 hacer que nuestro código y estilos sean más flexibles .

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 el 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 aparece más tarde en la hoja de estilo entra en vigor.

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 resulta muy fácil ver qué selector está actuando sobre un elemento.

Artículos útiles: