Los selectores de CSS son una de las partes más importantes del estándar de aplicación de estilos en las páginas web y por tanto, una de las principales herramientas que nos ofrece el lenguaje para aplicación del aspecto a los elementos de la página.

Es importante aprender a usar correctamente los selectores y conocer las diversas posibilidades que existen para sacarle partido a las CSS. En este artículo te explicaremos los selectores más importantes que deberías conocer sí o sí y aprenderás a usarlos de diversas maneras.

Qué son los selectores de CSS

Los selectores de CSS son básicamente unos códigos que nos permiten indicar el elemento o elementos sobre los que queremos aplicar determinados estilos.

Vamos a suponer que queremos aplicarle un estilo a los enlaces, entonces podremos usar un selector de etiqueta "a". Ahora imaginemos que existen un determinado elemento único al que queremos aplicarle un estilo, entonces podríamos usar un selector de identificador.

El selector por tanto, define el conjunto de elementos a los que afectarán determinados atributos CSS.

Vamos a ver un código CSS para identificar qué es un selector:

h1 {
  font-size: 4rem;
}

En el código anterior "h1" es el selector, en este caso un selector de etiqueta, que nos sirve para indicar que los siguientes atributos CSS los queremos aplicar sobre todas las etiquetas H1 de la página.

Los principales selectores de CSS

Existen decenas de selectores distintos. Muchos de ellos son sencillos y otros bastante sofisticados. Además, podemos combinar los selectores entre sí para poder acotar mejor el conjunto de elementos a los que queremos aplicar estilos.

Casi la mayoría de las veces usamos selectores básicos y combinaciones de selectores básicos. Solamente en casos determinados nos vemos obligados a usar selectores avanzados. Así que vamos a comenzar por entender bien los selectores más importantes, que será los que más usemos en nuestro día a día.

Selectores de identificador

Los selectores de identificador nos sirven para aplicar estilos a un único elemento de la página. El identificador del elemento se define en la propia etiqueta con el atributo "id".

<div id="mielemento">
	Este elemento tiene el identificador "mielemento"
</div>

Los selectores de identificador se definen con el prefijo "#" delante del identificador de la etiqueta a la que queremos aplicar los estilos.

#mielemento {
  color: red;
  background-color: #fee;
}

Selectores de etiqueta

Los selectores de etiqueta son aquellos que permiten aplicar estilos a todas las etiquetas de un tipo, por ejemplo, a todos los párrafos (etiqueta P), a todas las listas desordenadas (etiqueta UL) o a todos los enlaces (etiqueta A).

li {
  list-style-type: none;
  padding: 1rem;
}

En este caso hemos usado el selector "li" que aplicará estilos a todos los elementos de listas, tanto a los elementos li de las listas ordenadas como de las listas desordenadas. Es decir, cada vez que aparezca una etiqueta <li> se le aplicarán esas reglas de estilo.

Selectores de clase

Los selectores de clase son muy importantes, porque nos permiten aplicar estilos a conjuntos de elementos de manera muy versátil.

Las clases son nombres que nosotros asignamos libremente a las etiquetas que necesitemos. Las clases se asignan a las etiquetas por medio del atributo class, de esta forma.

<span class="miclase">elemento span con la class "miclase"</span>

Las "class" de CSS son muy versátiles porque podemos crear clases con los nombres que queramos y aplicarlas a las etiquetas que queramos, independientemente del tipo de etiqueta.

<div class="item">
  Este elemento tiene la clase item.
  <ul class="otro lista_grande">
    <li>Este viene sin class</li>
    <li class="item">Este viene con class item</li>
    <li class="otro">Este viene con class otro</li>
  </ul>
  <p>
    Este párrafo está con un <span class="item">span con class item</span>
  </p>
</div>

En el código anterior puedes ver cómo hemos aplicado distintas clases y lo hemos hecho de formas muy variadas. Por ejemplo, puedes reparar en los siguientes detalles.

• La clase "item" la tienen un gran número de elementos
• La clase "otro" también la hemos aplicado un par de veces
• La lista tiene dos clases aplicadas a la vez, la clase "otro" y la clase "lista_grande"

En el código CSS los selectores de clase se indican con el caracter punto (".") antes del nombre de la clase.

.item {
  font-weight: bold;
  font-size: 0.9rem;
}

.lista_grande {
  margin: 1.5rem;
  font-size: 1.2rem;
}

.otro {
  background-color: #303030;
  color: #fff;
}

Otros selectores CSS

Los tres anteriores son los selectores más importantes del lenguaje y sin duda los que más vas a utilizar en tus diseños. Sin embargo hay muchos más selectores que necesitarás manejar para hacer cosas más avanzadas.

Por ejemplo tienes los selectores con pseudo-elementos, que te permiten hacer cosas como seleccionar el primer elemento de una lista (por ejemplo el primer párrafo de una sección) o el último. O las pseudo-clases que te permiten aplicar estilos a los elementos cuando se pasa el ratón por encima, o cuando el foco de la aplicación está sobre el elemento.

a:hover {
  color: #f80;
}

Esto quiere decir que al pasar el ratón por encima de los enlaces se pondrán de color naranja.

Además, con la evolución de las CSS han ido apareciendo nuevos grupos de selectores que sin duda te resultarán de utilidad. Puedes consultar el artículo Selectores que quizás no conozcas para obtener más información.

Entre todos los selectores de CSS que no estamos viendo en este artículo, pero que verás en otras secciones del manual, queremos destacar algunos.

Selectores de atributo

Los selectores de atributo sirven para seleccionar elementos HTML que tienen atributos que nos interesen, incluso pueden permitir seleccionar aquellos elementos que tienen un valor concreto en su atributo.

Los selectores de atributo indican entre corchetes el nombre del atributo del HTML que queremos localizar. Por ejemplo, con el siguiente código podemos encontar los elementos que tengan un atributo alt.

[alt] {
  border: 4px solid purple;
}

Esto permite seleccionar imágenes que tengan un atributo alt, con cualquier valor, incluso sin que tengan un valor en particular, incluso aunque no sean imágenes.

Es decir, el selector anterior también afectaría a este elemento <p> que no es una imagen, por tener un atributo alt, aunque este atributo no le sirva para nada porque no aplica a párrafos.

<p alt>
  esto tiene un atributo alt que no sirve para nada!
</p>

De modo que, si queremos seleccionar únicamente las imágenes que tengan atributo alt podemos combinar el selector de atributo con el selector de etiqueta, como se puede ver a continuación.

img[alt] {
  padding: 10px;
  background-color: aquamarine;
}

Si queremos usar el selector de CSS de atributo para detectar elementos que tengan un valor determinado en el atributo, podemos hacerlo indicando un igual y el valor que queremos localizar.

[data-use="featured"] {
  font-size: 1.4rem;
}

Este selector que acabamos de ver permitiría encontrar todos los elementos de la página que tienen el data-attribute "data-use" con el valor "featured".

Selector CSS de negación

El ejemplo anterior del selector de imágenes con el atrubuto alt me lleva a otro ejemplo de selector que quizás algunos lectores se estarán preguntando. ¿Quieres saber cómo conseguir seleccionar todas las imágenes que no tienen su atributo alt? Para ello podemos usar el selector :not, con el que podemos negar otro selector.

El selector de negación es en realidad lo que se llama una pseudoclase. Se escribe :not() y entre paréntesis colocamos el selector que deseamos negar.

Por ejemplo, quiero darle un estilo a todas las imágenes de la página que NO tengan el atributo alt.

img:not([alt]) {
  border: 1px solid red;
}

Pero podría negar cualquier cosa. Por ejemplo, conseguir todas las etiquetas de la página que no sean párrafos:

:not(p) {
  border: 3px solid blue;
}    

Cómo combinar selectores CSS

Ahora vamos a aprender a combinar distintos selectores de CSS para conseguir restringir mejor los elementos a los que se les aplicará los estilos. Existen diversas combinaciones que podemos destacar y que se usan mucho en el día a día del diseño y maquetación web.

Aplicar estilos a varios selectores a la vez

Este comportamiento es muy común y nos permite ahorrar código, ya que podemos escribir los estilos una vez y aplicarlos a múltiples selectores.

Imagina que quieres que quieres aplicar negrita y color verde a una serie de elementos, por ejemplo todos los encabezamientos H1, todos los elementos de class "item" y el elemento con id="este". Entonces puedes aplicar una regla de estilos combinando los distintos selectores separados por comas.

h1, .item, #este {
  font-weight: bold;
  color: green;
}

Selector de todos las etiquetas que tienen una clase

A veces es útil seleccionar todas las etiquetas que tienen una clase en particular. Por ejemplo, todas las etiquetas de párrafo que tienen la clase "importante". Para ello colocamos el selector de etiqueta y seguidamente un punto y el nombre de la clase.

<p class="importante">Este párrafo es importante</p>
<p>Este párrafo no es importante</p>
<p class="importante">Este también es importante</p>
<div class="importante">Este es un div con class importante</div>

Ahora vamos a provocar que todos los párrafos importantes aparezcan con el texto subrayado.

p.importante {
  text-decoration: underline;
}

Observa que este estilo afectará únicamente a los párrafos. En el caso de la etiqueta <div> que aparece al final, este estilo no afectará, porque sólo tiene en cuenta los párrafos.

Aplicar estilos a los hijos que cumplan un selector

El selector anterior es interesante, pero a veces nos interesa buscar hijos de un elemento que tengan un selector en particular.

La sintaxis es parecida a la del punto anterior, pero en este caso lo que hacemos es separar los selectores por un espacio en blanco.

Por ejemplo, imagina que quieres colocar un borde de separación en la parte de abajo de todos los elementos que estén en el ASIDE y que tengan la clase "separador".

<aside>
  <h2 class="separador">Menú</h2>
  <p>
    <a href="#">Enlace 1</a>
  </p>
  <p>
    <a href="#">Enlace 2</a>
  </p>
  <p class="separador">
    <a href="#">Enlace 3</a>
  </p>
  <div class="separador">
    <img src="imagen.jpg">
  </div>
</aside>

Quizás con poner el estilo en la clase "separador" sería suficiente, pero igual tenemos separadores en otra sección de la página que quizás tengan un estilo diferente. Entonces podríamos hacer que solamente los separadores del ASIDE tuvieran un estilo particular.

aside .separador {
  border-bottom: 2px solid #ddd;
}

Selector de hijos directos

Podemos relacionar selectores entre sí, para que se apliquen unos estilos cuando unos elementos están dentro de otros, pero solamente cuando unos elementos son hijos directos de otros.

El selector de hijos directos se indica con el separador ">" colocado entre los dos selectores. Lo veremos con un ejemplo.

<p>Esto es <span>un span hijo directo de P</span></p>
<p>Aquí tenemos una <b>negrita y un <span>span que no es hijo directo</span></b></p>
<p>Aquí hay otro <span>span hijo directo</span> de P</p>

En el anterior HTML queremos seleccionar todos los SPAN que son hijos directos de los párrafos. En el párrafo del medio hay un SPAN, pero no es hijo directo del párrafo, porque está dentro de una negrita.

En este caso usaremos el siguiente selector para afectar únicamente a los hijos directos:

p > span {
  font-size: 1.5rem;
}

Ejercicio práctico de selectores

Vamos a poner el siguiente HTML para sacar algunos selectores y aplicar estilos a elementos dados. Dado un HTML, plantearemos unas preguntas, a fin de comprobar que has podido entender el tema de selectores. No será demasiado difícil, pero no te preocupes si fallas algunos porque en realidad con la práctica estamos seguros que lo dominarás.

<ul>
  <li class="item">Este es un item hijo directo</li>
  <li>Este es un item pero <i>sin</i> la clase <span class="item">y aquí si que hay un item</span></li>
  <li>No tengo item</li>
  <li class="item orden">Este es hijo directo con item y orden</li>
</ul>
<ol class="orden">
  <li id="elem2_1">Elemento 1</li>
  <li class="item">Elemento <span>2</span></li>
  <li>Elemento 3</li>
</ol>

Queremos que nos digas cómo hacer lo siguiente:

• Todos los LI deben tener fondo gris.
• El elemento con identificador "elem2_1" (id="elem2_1") debe tener fondo naranja.
• Los elementos de class "orden" tienen texto mayor que el resto.
• Todos los elementos de clase "item" deben tener un subrayado.
• Todos los SPAN y las etiquetas I (itálica) deben aparecer con el texto en negrita.
• El texto de todos los elementos LI de la lista ordenada (OL) debe estar en rojo y todos los LI de la lista desordenada (UL) deben tener el texto en azul.
• El elemento SPAN de clase "item" debe tener tamaño del texto menor que el resto.
• Los elementos de clase item que son hijos directos de la lista UL tienen que tener un borde rojo.

Solución del ejercicio de selectores CSS

Intenta hacer el ejercicio por tu propia cuenta antes de ver las soluciones. Ten en cuenta que pueden existir varias soluciones válidas para algunos de los ejercicios, así que quizás no hayas llegado al mismo código CSS que te proponemos a continuación.

Lo que importa en este ejercicio es sobre todo el uso de los selectores correctos. Los valores de los atributos de estilo estaban un poco abiertos.

li {
  background-color: #eee;
}
#elem2_1 {
  background-color: orange;
}
.orden {
  font-size: 1.4rem;
}
.item {
  text-decoration: underline;
}
span, i {
  font-weight: bold;
}
ol li {
  color: red;
}
ul li {
  color: blue;
}
span.item {
  font-size: 0.8rem;
}
ul > .item {
  border: 1px solid red;
}

Esperamos que hayas podido encontrar soluciones correctas para los ejercicios planteados. Con todo esto hemos aprendido bastantes cosas sobre los selectores CSS. Aunque nos hemos limitado a los más básicos. También hemos visto cómo combinarlos para crear selectores sofisticados, capaces de atinar bastante en el conjunto de elementos sobre los que queremos aplicar estilos.

En el resto del Manual de CSS continuaremos aprendiendo más sobre selectores, abordando asuntos más específicos pero también muy útiles en el trabajo de desarrollador.