Grupo de selectores CSS

Agrupación de selectores

Supongamos que deseas que los elementos h2 y los párrafos tengan color gris. La manera más sencilla de lograrlo es utilizando la siguiente declaración:

h2, p {color:gray;}

Coloca los selectores h2 y p a la izquierda de la regla, luego separa con una coma, y define una regla. El estilo a la derecha (color:gray;) se aplicará a los elementos referenciados por estos selectores. La coma informa al navegador de que la regla contiene dos selectores diferentes. Sin esta coma, el significado de la regla sería completamente diferente. Ver selector de descendientes.

Se puede agrupar una cantidad ilimitada de selectores juntos, no hay restricciones.

Por ejemplo, si desea mostrar muchos elementos en gris, puede usar reglas similares a las siguientes:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Consejo:A través de la agrupación, los creadores pueden 'comprimir' ciertos tipos de estilos juntos, lo que permite obtener tablas de estilos más concisas.

Las siguientes dos reglas de grupo producen el mismo resultado, pero es claro ver cuál es más fácil de escribir:

/* sin agrupación */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* agrupación */
h1, h2, h3, h4, h5, h6 {color:blue;}

Prueba personalmente

La agrupación ofrece algunas opciones interesantes. Por ejemplo, en el siguiente ejemplo, todos los grupos de reglas son equivalentes, cada grupo solo muestra diferentes métodos para agrupar selectores y declaraciones:

/* grupo 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* grupo 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* grupo 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

pruebe personalmente:

Por favor, observa que en el grupo 3 se utiliza 'declaración de agrupación'. Más tarde te presentaremos 'declaración de agrupación'.

Selector de comodín

CSS2 introdujo un nuevo selector simple - el selector de ancla (universal selector), que se muestra como un asterisco (*). Este selector puede coincidir con cualquier elemento, como un comodín.

Por ejemplo, la regla siguiente puede hacer que cada elemento del documento sea rojo:

* {color:red;}

Prueba personalmente

Esta declaración es equivalente a una selector de agrupación que lista todos los elementos del documento. Utilizando el selector de ancla, con solo pulsar una tecla (solo un asterisco), se puede especificar el valor del atributo 'color' de todos los elementos del documento como 'red'.

Agrupación de declaraciones

Podemos agrupar tanto los selectores como las declaraciones.

Supongamos que deseas que todos los elementos h1 tengan un fondo rojo y se muestren con texto azul usando la fuente Verdana de 28 píxeles de altura, puedes escribir el siguiente estilo:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Pero este método no es muy eficiente. Sobre todo, puede ser molesto crear una lista de estilos para un elemento que tiene varios estilos. En su lugar, podemos agrupar las declaraciones juntas:

h1 {font: 28px Verdana; color: white; background: black;}

Esto tiene el mismo efecto que las 3 líneas anteriores de la hoja de estilo.

Ten en cuenta que es muy importante usar puntos y comas al final de cada declaración para agruparlas. Los navegadores ignoran los espacios en blanco en la hoja de estilo. Con puntos y comas, puedes usar sin dudar el siguiente formato para crear estilos:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Prueba personalmente

¿Qué opinas, la legibilidad de esta forma de escritura es mayor?

Sin embargo, si se ignora el segundo punto y coma, el agente de usuario interpretará esta hoja de estilo de la siguiente manera:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Prueba personalmente

Debido a que 'background' no es un valor válido para 'color', y ya que solo se puede especificar un nombre de color para 'color', el agente de usuario ignorará completamente esta declaración de color (incluso 'background: black'). De esta manera, el título h1 solo se mostrará en azul, sin fondo rojo, aunque es más probable que no se muestre ni siquiera el azul h1. Por el contrario, estos títulos solo se mostrarán en el color predeterminado (generalmente negro), y no habrá color de fondo. La declaración 'font: 28px Verdana' aún funciona correctamente, ya que realmente termina con un punto y coma.

Al igual que los grupos de selectores, los grupos de declaraciones son una manera conveniente de acortar las hojas de estilo, haciendo que sean más claras y más fáciles de mantener.

Consejo:Es una buena práctica agregar un punto y coma después del último declarativo en una regla. Al agregar otra declaración, no hay que preocuparse por olvidar agregar otro punto y coma.

Grupo de selectores y declaraciones

Podemos combinar grupos de selectores y grupos de declaraciones en una regla para definir estilos relativamente complejos con pocas declaraciones.

Las siguientes reglas especifican un estilo complejo para todos los títulos:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Prueba personalmente

Esta regla define el estilo de todos los títulos con texto gris sobre fondo blanco, con un relleno interno de 10 píxeles y un borde sólido de 1 píxel, y la fuente de texto es Verdana.