Selectores CSS avanzados

Al margen de la selección de elementos a través de clases e IDs, algo que es realmente cómodo y muy frecuentemente utilizado en CSS, existe un amplio abanico de métodos para seleccionar elementos dependiendo de la estructura del documento HTML denominados combinadores CSS:

En los siguientes apartados, veremos varios ejemplos gráficos sobre un supuesto ejemplo de documento HTML, dibujado en forma de árbol esquemático. De esta forma, sabremos que elementos están dentro de otros y nos será más fácil interpretar cada uno de los selectores.

Agrupación de selectores

En muchas ocasiones nos ocurrirá que tenemos varios bloques CSS diferentes con los mismos estilos exactos, algo que es perjudicial, ya que si nos ocurre a menudo, esto hará que el documento CSS ocupe más y por lo tanto, tarde más en descargarse:

strong {
  border-color: red;
  background: white;
}

span {
  border-color: red;
  background: white;
}

img {
  border-color: red;
  background: white;
}

Una buena práctica es ahorrar texto y simplificar nuestro documento CSS lo máximo posible, por lo que podemos hacer uso de la agrupación CSS.

De esta forma, podemos pasar de tener el ejemplo anterior, a tener el siguiente ejemplo (que es totalmente equivalente), donde hemos utilizado la agrupación para decirle al navegador que aplique dichos estilos a las etiquetas strong, span e img:

strong, span, img {
  border-color: red;
  background: white;
}

Consejo: Esto puede parecer poco importante a priori, pero a medida que avanzamos con nuestro diseño, los documentos CSS se hacen tremendamente grandes y difíciles de mantener, por lo que cuanto más sencillo sea, mejor.

Selector descendiente

En CSS podemos utilizar lo que se llama el selector descendiente, que no es más que una forma de seleccionar ciertos elementos que están dentro de otros elementos. Su sintaxis se basa en colocar los elementos uno a continuación de otro, separado por un espacio:

div#pagina div {
  background-color: blue;
}

En el ejemplo anterior, aplicamos los estilos CSS (color azul de fondo) a todos los elementos div que estén dentro de un div con ID pagina. ¡Atención! Si existe un elemento div fuera de div#pagina, no se aplicarán los estilos indicados.

Consejo: Se pueden construir selectores muy complejos con tantos elementos como se quiera, pero siempre se debe tener en cuenta que cuanto más elementos descendientes existan, más lento será el procesamiento de dicha regla por los navegadores.

Aunque es perfectamente posible, pero en lugar de utilizar varios elementos en el selector, te recomiendo ser despierto y utilizar sólo los elementos clave que necesites, minimizando así el número de elementos utilizados en la medida de lo posible.

Selector hijo

Aunque el selector descendiente es bastante interesante, nos puede interesar hacer la misma operación, pero en lugar de seleccionar todos los elementos descendientes, seleccionar sólo los descendientes directos del elemento, descartando así nietos y sucesivos.

div#pagina > div {
  background-color: blue;
}

Veamos los elementos seleccionados en el documento de ejemplo para afianzar conceptos:

Como se puede ver, y al contrario que el caso anterior, no se seleccionan todos los elementos div descendientes, sino solo aquellos que son hijos directos del primer elemento especificado.

Selector hermano adyacente

Es posible también hacer referencia a los elementos hermanos, es decir, aquellos elementos que están directamente a continuación del elemento especificado. Mediante el selector hermano adyacente se pueden seleccionar aquellos elementos hermanos que están seguidos el uno de otro (en el mismo nivel).

div.articulo span + span {
  color: blue;
}

Cómo se podrá ver en el siguiente ejemplo, este selector hará que se seleccionen los elementos span que estén a continuación de un div.articulo span:

Selector hermano general

En el ejemplo anterior, es posible que necesitemos ser menos específicos y en lugar de querer seleccionar los elementos hermanos que sean adyacentes, seleccionar todos los hermanos en general, sin necesidad de que sean adyacentes. Esto se puede conseguir con el selector hermano general, que se simboliza con el símbolo ~.

Como se ve en el ejemplo, no es necesario que el elemento strong se encuentre adyacente al primero, sino que basta con que sean hermanos en el mismo nivel.

Selector universal

El selector universal se simboliza con un asterisco (*) y es la forma de aplicar ciertos estilos en TODOS los elementos HTML de un documento.

Este ejemplo selecciona todos los elementos dentro de div#menu. El selector universal puede ser muy útil en algunos casos para resetear ciertas propiedades de todo un documento, como en el siguiente ejemplo, donde se eliminan los márgenes de todos los elementos del documento HTML:

* {
  margin: 0;
  padding: 0;
}