Los selectores son patrones que se utilizan para vincular propiedades de estilo a elementos en un documento. Puedes darle estilo a todos los elementos o restringir la selección con un selector específico.

Selectores Básicos

  • Selectores de tipo: seleccionan elementos del documento HTML por su etiqueta. Por ejemplo, el selector p seleccionará todos los <p> de la página:
<body>
  <p>Texto</p>
  <p>Otro texto</p>
</body>
p {
  font-size: 16px;
}
  • Selectores de clase: especifican el estilo de los elementos con una clase determinada. Por ejemplo, este selector seleccionará el párrafo con la clase .highlight.
<body>
  <p class="highlight">Texto</p>
  <p>Otro texto</p>
</body>
.highlight {
  background-color: yellow;
}
  • Selectores de ID: seleccionan un elemento por su ID único. Por ejemplo, #welcome coincide con el elemento con id="welcome":
<div id="welcome">
  <p>¡Bienvenido!</p>
</div>
#welcome {
  background-color: blue;
}
  • Selectores de presencia y valor de atributo: encuentran todos los elementos que tienen un atributo o valor de atributo determinado. Por ejemplo, aquí seleccionamos todos los enlaces que comienzan con http://, pero que no tienen ejemplo.com.
a[href^="http://"]:not([href*="ejemplo.com"]) {
  color: #000;
  text-decoration: none;
}
  • Selector universal: permite especificar estilos para todos los elementos HTML sin excepción. Se indica como un asterisco *. En el siguiente ejemplo, utilizamos el selector universal con pseudoelementos para cambiar el cálculo del tamaño total del elemento.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Selectores Combinadores

Los combinadores seleccionan elementos basándose en su relación en el árbol DOM. Pueden seleccionar elementos que son descendientes, hermanos o padres de otros elementos.

Ejemplo de árbol DOM: Aquí, html es el padre de head y body. head es el padre de meta y title, y body es el padre de header y main.

Ejemplo de árbol DOM
Ejemplo de árbol DOM

Combinador hermano adyacente

Se escribe como selector1 + selector2. Selecciona el elemento que coincide con selector2 que está precedido por un elemento que coincide con selector1.

<div>
  <p class="first">Hoy me convertí en un gran desarrollador front-end.</p>
  <p class="second">Escribí estilos para el texto.</p> 
<div>
.first + .second {
  color: white;
}

El selector .first + .second aplicará estilos al párrafo con la clase .second porque está precedido por un elemento con la clase .first. Entonces, la oración «Escribí estilos para el texto.» se volverá blanca.

Por lo tanto, la utilidad del combinador hermano adyacente radica en su capacidad para dirigir específicamente elementos que tienen una relación directa con otro elemento específico.

  • Con .second { color: white; }, cualquier elemento con la clase .second en el documento se verá afectado por la regla y se le aplicará el color blanco, independientemente de su relación con otros elementos en el DOM. Esto significa que si hay otros elementos con la clase .second, también se les aplicará el estilo blanco.
  • Con .first + .second { color: white; }, la regla solo afectará al elemento con la clase .second que está directamente precedido por un elemento con la clase .first.

Combinador hijo

Se escribe como selector1 > selector2. Selecciona elementos que son hijos directos del elemento que coincide con selector1.

<div class="decoration">
  <p>Aprendí CSS</p>
    <div>
    <p>Definitivamente conozco los selectores.</p>
  </div>
</div>
.decoration > p {
  color: red;
}

Los estilos solo se aplicarán a «Aprendí CSS«, que se volverá rojo.

Combinador hermanos generales

Se escribe como selector1 ~ selector2. Agrega estilos al elemento que coincide con selector2 si está precedido por un elemento que coincide con selector1. Ambos elementos deben tener el mismo padre.

<div>
  <p>Era una hermosa mañana temprano. Un momento perfecto para hacer una taza de café o té, abrir mi computadora portátil y aprender CSS.</p>
  <p>Así que eso fue lo que hizo Leo. Acarició al gato, se armó de valor y se abrió a un nuevo mundo de diseño web.</p>
</div>
p ~ p {
  margin-top: 1em;
}

Los estilos se aplicarán al segundo párrafo, que tendrá un margen superior.

Este selector difiere del selector hermano adyacente en que puede haber otros elementos entre los elementos selector1 y selector2.

Combinador de descendientes

Se escribe como selector1 selector2. Encuentra todos los descendientes del elemento que coincide con selector1 y les aplica estilos.

<p>Resultó que los selectores
  <span>no son tan aterradores</span>
  como pensaba. Solo necesitas practicar un poco,
  <span>y todo quedará claro de inmediato.</span>
</p>
p span {
  color: blue;
}

Aquí, «no son tan aterradores» y «todo quedará claro de inmediato» se colorearán en azul.

Selectores de Pseudoclases

Los pseudo clases son selectores simples que te permiten seleccionar elementos en función de información que no se encuentra en el árbol DOM o que no se puede expresar con un selector simple.

💡
Un selector simple es un selector que tiene una sola condición.

También pueden ser dinámicos, es decir, un elemento puede perder o adquirir una pseudo clase mientras el usuario interactúa con él, por ejemplo, al pasar el cursor sobre un botón.

Para usar una pseudo clase, debes agregarla al selector, por ejemplo:

a:active {
  color: red;
}

En este ejemplo, cambiamos el color del enlace a rojo cuando el usuario hace clic en él.

:hover

La pseudo clase :hover coincide con un elemento cuando el usuario pasa el cursor sobre él. Por ejemplo, aquí se usa la pseudo clase para eliminar el subrayado de un enlace:

Cómo eliminar el subrayado de un enlace:

<a href="#">Haz clic en mí</a>
a:hover {
text-decoration: none;
}

:active

La pseudo clase :active coincide con un elemento que se está presionando activamente. Aquí, la pseudo clase se usa para redondear los bordes de un botón cuando se hace clic en él:

button:active {
  border-radius: 30px;
}

:visited

La pseudo clase :visited coincide con un enlace visitado. Por ejemplo, podemos usarla para cambiar el color de un enlace en el que hizo clic el usuario:

a:visited {
  color: grey;
}

:focus

La pseudo clase :focus coincide con un elemento que está enfocado, es decir, cuando el elemento se selecciona para ingresar datos o navegar con el teclado. Por ejemplo, aquí se usa :focus para agregar un borde verde alrededor de un campo de entrada:

<input type="text">
input:focus {
  border: 2px solid green;
}

:first-child, :last-child y :nth-child(n)

Estas pseudo clases seleccionan un elemento por su número de orden. :first-child coincide con el primer elemento secundario del padre, :last-child coincide con el último. Y la pseudo clase :nth-child(n) apunta al n-ésimo elemento secundario. Por ejemplo, puedes usarla para seleccionar el segundo, quinto o penúltimo elemento. En lugar de n entre paréntesis, se especifica un número entero o una expresión matemática.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
/*Seleccionará el primer elemento: HTML*/
li:first-child {
  font-weight: 700;
}

/*Seleccionará el último elemento: JavaScript*/
li:last-child {
  text-decoration: underline;
}

/*Seleccionará el segundo elemento: CSS*/
li:nth-child(2) {
  font-weight: 700;
}

:first-of-type, :last-of-type y :nth-of-type(n)

Estas pseudo clases son similares a las anteriores. También seleccionan un elemento por su número de orden, pero solo considerando el tipo (etiqueta).

<div>
  <p>Primer párrafo</p>
  <p>Segundo párrafo</p>
  <div>
    <span>Texto resaltado</span>
    <p>Tercer párrafo</p>
    <p>Cuarto párrafo</p>
  </div>
  <p>Quinto párrafo</p>
  <span>Texto resaltado</span>
</div>
/*El texto en la primera etiqueta <p> estará en negrita*/
p:first-of-type {
  font-weight: 700;
}

/*El texto en la segunda etiqueta <p> estará en verde*/
p:nth-of-type(2) {
  color: green;
}

/*El texto en la última etiqueta <p> estará subrayado*/
p:last-of-type {
  text-decoration: underline;
}

«Primer párrafo» y «Tercer párrafo» estarán en negrita. «Segundo párrafo» y «Cuarto párrafo» estarán en verde. «Cuarto párrafo» y «Quinto párrafo» estarán subrayados.

Si usamos first-child, nth-child(2) y last-child aquí, obtendríamos un resultado diferente. Solo «Primer párrafo» estaría en negrita. «Segundo párrafo» y «Tercer párrafo» estarían en verde. «Cuarto párrafo» estaría subrayado. Y todo esto por el hecho de que entre <p> hay otros elementos — <span>.

A la izquierda, estamos diseñando texto con selectores *-of-type, a la derecha con *-child

Diferencia de selectores *-of-type, y *-child
Diferencia de selectores *-of-type, y *-child

:empty

La pseudo clase :empty es un selector CSS que coincide con elementos que no tienen elementos secundarios, incluidos nodos de texto y otros elementos. Se puede usar para diseñar elementos que están vacíos o no tienen contenido:

<input type="text">
input:empty {
  border: 1px solid red;
}

En este ejemplo, usamos :empty para agregar un borde rojo a una entrada vacía.

Conclusión

Hemos revisado los selectores de pseudo clases más populares, pero en realidad hay más. Puedes encontrar una lista completa en la especificación W3C. Y para aprender a usar selectores de pseudo clases en la práctica, completa estos ejercicios del curso «Introducción a la programación».

Categorizado en:

CSS,