Selectores CSS: de básico a avanzado (parte 1: comunes, de hijo, hermano y atributo)

Selectores CSS: de básico a avanzado (parte 1: comunes, de hijo, hermano y atributo)

Con esta guía de referencia podrás aprender todo que necesitas saber sobre los selectores CSS, uno de los aspectos más importantes de CSS. ¡Toma nota!

Gracias a los selectores CSS, podemos determinar cómo se aplican los estilos a los distintos elementos de una página. Por esto, es muy importante conocerlos todos (o su mayoría), y saber utilizarlos correctamente para obtener un código eficiente y mantenible.

Selectores CSS: de básico a avanzado (parte 1: comunes, de hijo, hermano y atributo)

Pero, ¿qué es un selector? Básicamente es un patrón que utilizamos para seleccionar aquellos elementos (o solo un elemento) a los que queremos aplicar determinados estilos.

A lo largo de esta serie de tres artículos, vamos a repasar una gran cantidad de ellos (por lo menos, los que yo considero más importantes), pero recuerda que siempre tienes la recomendación oficial de la W3C, donde puedes ver en más profundidad todos los selectores y cómo debes utilizarlos. Hoy vamos a hablar de los selectores comunes, de hijo, hermano y atributo.

Selectores comunes

Es muy probable que estos ya los conozcas, pero antes de profundizar en los más avanzados es conveniente repasarlos.

Dentro de los selectores comunes nos encontramos los basados en el tipo de elemento, en su clase y en su id.

Tipo de elemento

Como su nombre indica, selecciona el elemento en función de su tipo, es decir, el nombre de su etiqueta en HTML. Se representa indicando únicamente el nombre de la etiqueta, sin ningún otro tipo de símbolo.

CSS
p {...}

HTML
<h1>...</h1>
<p>Elemento seleccionado</p>

Clase

Selecciona uno o varios elementos en función del valor del atributo class de dicho elemento, sin importar su tipo ni otras características. Se utiliza poniendo un punto (.) seguido del nombre de la clase.

CSS
.mi-elemento {...}

HTML
<h1 class="mi-elemento">Elemento seleccionado</h1>
<p>...</p>
<p class="mi-elemento">Elemento seleccionado</p>

ID

Es similar al anterior, pero en este caso seleccionamos elementos en función de su ID. ¡Recuerda que un ID debe ser único y utilizarse solo una vez en toda la página!

CSS
#mi-elemento {...}

HTML
<h1 id="mi-elemento">Elemento seleccionado</h1>

Selector universal

Selecciona todos los elementos de la página, sin importar su tipo, id, clase, etc. Puede ser útil en algunos casos, pero debes tener cuidado, ya que el uso de este selector ralentiza la velocidad de la página.

CSS
* {...}

HTML
<div id="contenedor"> <!-- Elemento seleccionado -->
    <h1>Elemento seleccionado</h1>
    <p>Elemento seleccionado</p>
</div>

Selectores de hijo

Los selectores de hijo nos permiten seleccionar elementos que se encuentra dentro de otros elementos (sus padres). De esta forma podremos, por ejemplo, seleccionar únicamente los párrafos de una determinada sección, los botones de un formulario, o los enlaces de un menú.

A partir de aquí vamos a hablar de hijos y hermanos. Estos conceptos, si no estás muy acostumbrado, puede resultar un poco liosos al principio, pero vamos a ver un ejemplo para entenderlo mejor:

HTML
<div id="abe">
    <div id="herb">...</div>
    <div id="homer">
        <div id="bart">...</div>
        <div id="lisa">...</div>
        <div id="maggie">...</div>
    </div>
</div>

Como puedes ver, Bart, Lisa y Maggie son hermanos, que a su vez son hijos directos de Homer, y descendientes de Abe. Homer también tiene un hermano, Herb, y ambos son hijos directos de Abe. ¿Se entiende así mejor?

Podemos seleccionar los hijos de un elemento de dos formas distintas: descendientes e hijos directos.

Selector de descendientes

Selecciona los elementos que se encuentran dentro del padre indicado, es decir, sus hijos. No es necesario que estén situados directamente depués que el padre dentro del árbol del documento, pueden estar dentro de otro elemento.

Su sintaxis es sencilla, ya que debes indicar, primero, el selector del padre y, a continuación y separado por un espacio, el selector del hijo que quieras seleccionar.

Puede ser algo complicado de entender, pero con el siguiente ejemplo lo verás más claro:

CSS
div p {...}

HTML
<p>...</p>
<div>
    <p>Elemento seleccionado</p>
	<article>
        <p>Elemento seleccionado</p>
    </article>
</div>

Selector de hijo directo

En este caso selecciona únicamente aquellos elementos que sean hijos directos del padre indicado. Es decir, que no exista ningún otro elemento contenedor intermedio. Para utilizar este selector, agregaremos el símbolo > entre el selector del padre y el del hijo.

CSS
div > p {...}

HTML
<p>...</p>
<div>
    <p>Elemento seleccionado</p>
	<article>
        <p>...</p>
    </article>
</div>

Selectores de hermano

En este punto ya estamos subiendo un poco el nivel, ya que estos selectores, por lo general, no son tan conocidos. A pesar de esto, son realmente útiles y potentes.

Si te pierdes, vuelve al ejemplo de los Simpsons para distinguir a los hermanos: Herb-Homer y Bart-Lisa-Maggie.

Al igual que con los hijos, también tenemos dos formas de acceder a los hermanos: mediante el general y el de hermano adyacente.

Selector de hermano general

Selecciona a todos los hermanos, es decir, a todos los elementos que tengan en común el mismo padre. Para utilizar este selector pondremos el símbolo ~ entre dos elementos: seleccionando solo el segundo elemento si está precedido por el primero, y ambos son hermanos.

CSS
p ~ span {...}

HTML
<div>
  <span>...</span>
  <p>...</p>
  <span>Elemento seleccionado</span>
  <span>Elemento seleccionado</span>
  <h2>...</h2>
  <span>Elemento seleccionado</span>
</div>
<span>...</span>

Ten en cuenta que se seleccionan los hermanos que van después del primer elemento indicado.

Selector de hermano adyacente

Selecciona al hermano que va justo después del indicado, es decir, al elemento adyacente. En este caso indicamos que estamos utilizando este selector con el símbolo +.

CSS
p + span {...}

HTML
<div>
  <span>...</span>
  <p>...</p>
  <span>Elemento seleccionado</span>
  <span>...</span>
  <h2>...</h2>
  <span>...</span>
</div>
<span>...</span>

¿Ves la diferencia respecto al anterior? Aquí solo se selecciona uno, el adyacente.

Selectores de atributo

Hasta ahora hemos visto cómo selecionar elementos en función de su tipo, clase, ID, hijos y hermanos. Pero, ¿existe alguna otra característica de HTML que podamos utilizar en CSS? Ya te imaginarás la respuesta: sí, los atributos.

A través de los selectores de atributo, podemos ir un paso más allá y ser más precisos a la hora de seleccionar elementos en función de, por ejemplo, su estado.

Aquí nos encontramos con unas reglas mucho más flexibles, acercándonos incluso a las expresiones regulares de una forma muy genérica. Veamos qué tipos de selectores de atributos tenemos.

Selectores de presencia

Mediante los selectores de presencia, podremos seleccionar aquellos elementos que contengan un atributo dado, sin importar el valor que tengan, o si incluso están vacíos.

CSS
img[alt] {...}

HTML
<img src="..." alt="..."> <!-- Elemento seleccionado -->
<img src="...">

Selectores de valor

En este caso, seleccionaremos aquellos elementos cuyo contenido del atributo dado cumpla con determinadas reglas. Probablemente te recuerden a expresiones regulares ya que, aunque no lo son exactamente, su parecido es muy notable.

  • [attr=val]: elementos cuyo valor del atributto attr coincide exactamente con val.
  • [attr~=val]: elementos cuyo valor del atributo attr coincide con val, pero este a su vez comparte el atributo con otros valores, separados por espacios.
  • [attr|=val]: elementos cuyo valor del atributo attr coincide exactamente con val, o empieza por val-.
  • [attr^=val]: elementos cuyo valor del atributo attr empieza por val.
  • [attr$=val]: elementos cuyo valor del atributo attr termina por val.
  • [attr*=val]: elementos cuyo valor del atributo attr contiene val.

Vamos a verlos todos en un ejemplo:

CSS
a[href="google.es"] {...}
/* <a href="google.es">Elemento seleccionado</a> */
/* <a href="google.com">...</a> */

a[class~="uno"] {...}
/* <a class="uno">Elemento seleccionado</a> */
/* <a class="uno dos">Elemento seleccionado</a> */

p[class|="arriba"] {...}
/* <p class="arriba">Elemento seleccionado</p> */
/* <p class="arriba-abajo">Elemento seleccionado</p> */
/* <p class="arribaabajo">...</p> */

p[class^="arriba"] {...}
/* <p class="arriba">Elemento seleccionado</p> */
/* <p class="arriba-abajo">Elemento seleccionado</p> */
/* <p class="arribaabajo">Elemento seleccionado</p> */

a[href$=".es"] {...}
/* <a href="www.google.es">Elemento seleccionado</a> */
/* <a href="www.google.com">...</a> */

a[href*="google"] {...}
/* <a href="www.google.es">Elemento seleccionado</a> */
/* <a href="www.google.com">Elemento seleccionado</a> */

Estos selectores dan mucho juego, por ejemplo, para aplicar estilos a enlaces en función del tipo de contenido al que dirigen: si es a una web, mostramos un icono, si es a un pdf, otro icono diferente. Esto nos ahorraría crear clases específicas para cada tipo de enlace.

Para finalizar

Y hasta aquí la primera parte de esta guía de selectores CSS. Hemos repasado los selectores más básicos y algunos más intermedios, por lo que ahora es tu turno de ponerlo todo en práctica.

La semana que viene dedicaré todo el artículo a otro tipo especial de selectores: las pseudo-clases. Hablaré en profundidad sobre ellas y pondré muchos ejemplos. ¡No te lo puedes perder!

Mientras tanto, si te has quedado con ganas de más, puedes leer otros artículos sobre CSS, por ejemplo, de metodologías ágiles y de unidades de medida.

Y si tienes alguna duda, o sugerencia, no dudes en dejarla en los comentarios o a través del formulario de contacto. ¡Estaré encantada de hablar contigo! 🙂