Agrupación de múltiples selectores CSS

Cuando agrupa selectores CSS, aplica los mismos estilos a varios elementos diferentes sin repetir los estilos en su hoja de estilo. En lugar de tener dos, tres o más reglas CSS que hacen lo mismo (establezca el color de algo en rojo, por ejemplo), usa una sola regla CSS que logra lo mismo. El secreto de esta táctica que aumenta la eficiencia es la coma.

& lt; / img & gt ;
Christopher Robbins / Photodisc / Getty Images & amp; amp; nbsp ;

Cómo agrupar selectores CSS

Para agrupar selectores CSS en una hoja de estilo, use comas to & amp; amp; nbsp; separe múltiples selectores agrupados en el estilo.& amp; amp; nbsp; en este ejemplo, el estilo & amp; amp; nbsp; afecta los elementos p y div:

& lt; pre & gt; div, p {color: # f00; } & lt; / pre & gt ;
Video destacado

En este contexto, una coma significa & amp; quot; y, & amp; quot; entonces este selector se aplica a todos los elementos del párrafo y a todos los elementos de división. Si faltara la coma, el selector se aplicaría a todos los elementos del párrafo que son hijos de una división. Ese es un tipo diferente de selector, por lo que la coma es importante.

Puede agrupar cualquier forma de selector con cualquier otro selector. Este ejemplo agrupa un selector de clase con un selector de ID:

& lt; pre & gt; p.red, #sub {color: # f00; } & lt; / pre & gt ;

Este estilo se aplica a cualquier párrafo con el atributo de clase de rojo y cualquier elemento (porque el tipo no está especificado) con un atributo de ID de sub .

Puede agrupar cualquier número de selectores, incluidos los selectores que son palabras individuales y selectores compuestos. Este ejemplo incluye cuatro selectores diferentes:

& lt; pre & gt; p, .red, #sub, div a: link {color: # f00; } & lt; / pre & gt ;

Esta regla CSS se aplicaría a:

• Cualquier elemento del párrafo
• Cualquier elemento con la clase de rojo
• Cualquier elemento con una ID de sub
• El enlace pseudo clase de los elementos de anclaje que son descendientes de una división.

Ese último selector es un selector compuesto. Como se muestra, it & amp; apos; s se combina fácilmente con los otros selectores en esta regla CSS.& amp; amp; nbsp; La regla establece el color de # f00 (rojo) en estos cuatro selectores, que es preferible a escribir cuatro selectores separados para lograr el mismo resultado.

Cualquier selector puede ser agrupado

Puede colocar cualquier selector válido en un grupo, y todos los elementos en el documento que coincidan con todos los elementos agrupados tendrán el mismo estilo basado en esa propiedad de estilo.

Algunos diseñadores prefieren enumerar los elementos agrupados en líneas separadas para legibilidad en el código. La apariencia en el sitio web y la velocidad de carga & amp; amp; nbsp; sigue siendo la misma. Por ejemplo, puede combinar estilos separados por comas en una propiedad de estilo en una línea de código:

& lt; pre & gt; th, td, p.red, div # firstred {color: rojo; } & lt; / pre & gt ;

o puede enumerar los estilos y amp; amp; nbsp; en líneas individuales para mayor claridad:

& lt; pre & gt; th, & lt; br & gt ;
td, & lt; br & gt ;
p.red, & lt; br & gt ;
div # firstred & lt; br & gt ;
{& lt; br & gt ;
color: rojo; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;

Por qué agrupar selectores CSS?

Agrupar los selectores CSS ayuda a minimizar el tamaño de su hoja de estilo para que se cargue más rápido. Es cierto que las hojas de estilo no son los principales culpables de la carga lenta; Los archivos CSS son archivos de texto, por lo que incluso las hojas CSS muy largas son pequeñas en comparación con las imágenes no optimizadas. Aún así, cada bit de optimización ayuda, y si puede reducir un poco el tamaño de su CSS y cargar las páginas mucho más rápido, eso es algo bueno.

Agrupar selectores también facilita mucho el mantenimiento del sitio. Si necesita hacer un cambio, simplemente puede editar una sola regla CSS en lugar de varias. Este enfoque ahorra tiempo y molestias.

El resultado final: la agrupación de selectores CSS aumenta la eficiencia, la productividad, la organización y, en algunos casos, incluso la velocidad de carga.

& amp; # x203A; Informática