CSS: Selectores

Los selectores son una parte muy importante del lenguaje CSS, ya que permiten indicar los elementos del documento HTML a los que hay que aplicar cambios. Hay varios tipos de selectores que deben conocerse bien para aplicar los estilos CSS de forma correcta y crear diseños web profesionales.

Existen selectores básicos mediante los que es posible apuntar a elementos usando el nombre de la etiqueta HTML, a partir del valor de su clase (atributo class), o mediante el valor de su identificador (atributo id). Sin embargo, también existen otros selectores más avanzados que son de gran utilidad.

Selector universal

El selector universal permite seleccionar todos los elementos del documento HTML o página web. Se usa el símbolo del asterisco (*). A pesar de lo simple que es, no es habitual tener que aplicar un estilo CSS a todos los elementos de la página. Se puede combinar con otros selectores.

En el ejemplo siguiente se elimina los márgenes de todos los elementos:

* {
  margin: 0;
}

Selector de elementos

Mediante el selector de elementos es posible seleccionar los elementos HTML con nombre de la etiqueta, sin los símbolos «menor que» (<) y «mayor que» (>). Por ejemplo, p permite seleccionar todos los párrafos (elemento <p>), y table permite seleccionar todas las tablas (elemento <table>).

Ejemplo de código CSS usando selectores de elementos:

p {
  margin: 0;
}

img {
  margin: 0;
}

Selector de clase

Los selectores de clase apuntan a aquellos elementos que tienen el atributo class con un valor especificado. En este caso, se usa el valor de class y el símbolo del punto como prefijo. Por ejemplo, si el elemento tiene el atributo class="box", el selector será .box.

Ejemplo de código CSS usando selectores de clase:

.box {
  margin: 0;
}

.menu {
  margin: 0;
}

Estas dos reglas CSS se aplicarán a todos los elementos HTML que tengan los atributos class="box" y class="menu".

Selector de identificador

Los selectores de identificador apuntan a aquellos elementos HTML que tienen el atributo id con un valor especificado. Se usa el valor de id y el símbolo del numeral/almohadilla (#) como prefijo. Por ejemplo, si el elemento tiene el atributo id="button", el selector será #button.

Ejemplo de código CSS usando selectores de identificador:

#button {
  margin: 0;
}

#form {
  margin: 0;
}

Hay que tener en cuenta que en un documento HTML, los identificadores sólo pueden usarse en un elemento; no se pueden repetir. Se recomienda el uso de clases siempre que sea posible.

Selectores avanzados

Mediante los selectores ya descritos es posible diseñar prácticamente cualquier página web. Sin embargo, en CSS existen otros selectores más avanzados y específicos que ayudan a simplificar el desarrollo web.

Índice de selectores avanzados:

Selector de descendientes

El selector de descendientes permite seleccionar elementos que se encuentran dentro de otros elementos; sin importar el nivel de anidamiento en el que estén. El selector funcionará mientras el descendiente esté entre las etiquetas de apertura y cierre del elemento de nivel superior.

Por ejemplo, tenemos esta estructura HTML:

<section>
  <p>Párrafo.</p>
</section>
<div>
  <p>Párrafo.</p>
</div>

Con CSS podemos hacer referencia a los párrafos que estén dentro del elemento <section>. Esto excluirá los párrafos que se encuentren fuera. Tal y como se puede ver en el siguiente ejemplo, los selectores están ordenados por orden de nivel, y están separados por un espacio.

section p {
  margin: 0;
}

Selector de hijos

Con el selector de hijos es posible seleccionar elementos que sean hijos directos de otros elementos. Se diferencia del selector de descendientes en la vinculación directa entre elemento padre y elemento hijo. Este selector se indica con el símbolo de «mayor que» (>) entre los dos elementos.

Por ejemplo, veamos este código HTML:

<section>
  <div>
    <div></div>
  </div>
</section>

Con CSS podemos hacer referencia a los elementos <div> que sean descendientes directos del elemento <section>, con lo cual, los otros elementos <div> que se encuentren en niveles inferiores quedarán excluidos.

Este es el código CSS de ejemplo:

section > div {
  margin: 0;
}

Selector de hermanos adyacentes

El selector de hermanos adyacentes permite seleccionar elementos concretos que siguen a otros elementos concretos, es decir, que se encuentran justo a continuación. Este selector se indica con el símbolo más (+) entre los dos elementos que queremos vincular como “hermanos”.

Los elementos hermanos comparten el mismo padre, por lo que a nivel de código HTML están en el mismo nivel de jerarquía.

Veamos este código HTML de ejemplo:

<div>
  <p></p>
  <img>
  <img>
</div>
<img>

Con CSS podemos hacer referencia al elemento <img> que se encuentra justo después del elemento <p>. Esto significa que se aplicará estilos al primer <img>, pero no a los otros dos: el que se encuentra después de otro <img> y el que está a continuación del elemento <div>.

Código CSS de ejemplo:

p + img {
  margin: 0;
}

Selector de hermanos generales

El selector de hermanos generales permite seleccionar elementos concretos que sean hermanos, pero sin necesidad de que sean hermanos adyacentes. Este selector se indica con el símbolo virguilla (~) entre los dos elementos que queremos vincular como “hermanos generales”.

Por ejemplo, tenemos el siguiente código HTML:

<section>
  <p></p>
  <img>
  <hr>
  <p></p>
</section>

Con CSS podemos hacer referencia al elemento <p> que se encuentra después del elemento <img>, pero sin importar la existencia de otros elementos HTML que puedan estar entre <img> y <p>. Por lo tanto, la presencia del elemento <hr> no afecta, y el primer párrafo quedará excluido.

Código CSS de ejemplo:

img ~ p {
  margin: 0;
}

Selector de atributos

El selector de atributos permite seleccionar elementos HTML en función de sus atributos y/o los valores de esos atributos. Para ello, se usan los dos corchetes ([]) como sufijo del nombre del elemento, y entre los corchetes se escribe el nombre del atributo en cuestión. Veamos un ejemplo CSS:

img[alt] {
  margin: 0;
}

Este ejemplo selecciona todos los elementos <img> que tengan el atributo alt. Pero es mucho más interesante hacer selecciones a partir del valor de los atributos en vez de sus nombres. En este caso, se introduce el atributo entero (nombre-valor) entre los corchetes. Así: elemento[atributo="valor"].

Existen cuatro tipos de selector de atributos:

Selector de pseudoclases

El selector de pseudoclases permite definir estilos para varios estados de los elementos. Por ejemplo, un estado puede ser cuando el enlace haya sido visitado o cuando el puntero del ratón pasa por encima del enlace. Este selector se usa mediante una palabra clave y el prefijo de dos puntos (:).

Existen otras pseudoclases relacionadas con la estructura del código HTML. Las más relevantes son :first-child y :last-child, que seleccionan un elemento que es el primero y el último de sus hermanos, respectivamente.

Otras pseudoclases similares son el caso de :first-of-type y :last-of-type, que además de seleccionar al primero y al último de sus hermanos, también coincide con un determinado selector de elemento.

Selector de pseudoelementos

El selector de pseudoelementos permite aplicar estilos a partes concretas de los elementos HTML, en vez de aplicarlos a todo el elemento. Este selector se usa mediante una palabra clave y el prefijo de dos puntos dobles (::).

Los pseudoelementos más conocidos son ::before y ::after, que permiten aplicar estilos mediante la propiedad content antes y después del elemento seleccionado. Con ::first-letter puede aplicarse estilos a la primera letra de un texto, y con ::first-line se aplican a la primera línea.

Agrupación de selectores

Cuando hay varias reglas CSS que definen los mismos estilos pero con selectores diferentes, es posible agruparlas. Esta práctica se conoce como agrupación de selectores y ayuda mucho a simplificar el código. En el siguiente ejemplo se muestran varias reglas CSS sin agrupar:

img {
  color: red;
}

.box {
  color: red;
}

#button {
  color: red;
}

Tal y como se puede ver, tres reglas CSS definen el color rojo para las imágenes (elemento <img>), para todos los elementos que tengan la clase box y para todos los elementos que tengan el identificador button. Se puede agrupar en la misma regla CSS introduciendo los selectores separados por una coma (,).

Ejemplo de código CSS de agrupación de selectores:

img, .box, #button {
  color: red;
}

Agrupación de reglas

A diferencia de la agrupación anterior, cuando hay varias reglas CSS que tienen los mismos selectores que establecen propiedades diferentes, lo lógico es agruparlas en una misma regla. Por ejemplo, a continuación se muestran dos reglas con un mismo selector, en este caso apuntando al elemento HTML <img>:

img {
  border: 1px solid blue;
}

img {
  margin: 5px;
}

Entonces agrupamos las dos reglas CSS en una:

img {
  border: 1px solid blue;
  margin: 5px;
}