CSS3, la última versión del lenguaje de estilo en cascada utilizado para dar estilo a páginas web, trae consigo una amplia variedad de selectores que permiten a los desarrolladores web seleccionar y aplicar estilos a elementos HTML de manera precisa y eficiente. En este artículo, exploraremos los diferentes tipos de selectores de CSS3 y proporcionaremos ejemplos detallados de su uso.

Selectores de tipo

Los selectores de tipo son los más básicos y simples. Permiten seleccionar elementos HTML en función de su nombre de etiqueta. Por ejemplo, para seleccionar todos los elementos «h1» en una página, se utiliza el selector de tipo «h1». El formato del selector de tipo es simplemente el nombre de la etiqueta:

h1 {
  /* Estilos aplicados a todos los elementos h1 */
}

Ejemplo:

<h1>Título principal</h1>

En este caso, todos los elementos «h1» en la página tendrán los estilos especificados en la regla CSS.

Selectores de clase

Los selectores de clase son más avanzados y permiten seleccionar elementos HTML en función de su atributo «class». Se puede asignar una o varias clases a un elemento utilizando el atributo «class» en el HTML, y luego seleccionar ese elemento utilizando el selector de clase correspondiente en CSS. El selector de clase se denota con un punto antes del nombre de la clase:

.mi-clase {
  /* Estilos aplicados a todos los elementos con la clase "mi-clase" */
}

Ejemplo:

<p class="mi-clase otra-clase">Este párrafo tiene la clase "mi-clase"</p>

En este caso, todos los elementos con la clase «mi-clase» tendrán los estilos especificados en la regla CSS.

Selectores de ID

Los selectores de ID son similares a los selectores de clase, pero se utilizan para seleccionar elementos HTML en función de su atributo «id». Se puede asignar un ID a un elemento utilizando el atributo «id» en el HTML, y luego seleccionar ese elemento utilizando el selector de ID correspondiente en CSS. El selector de ID se denota con un numeral antes del nombre del ID:

#mi-id {
  /* Estilos aplicados al elemento con el ID "mi-id" */
}

Ejemplo:

<div id="mi-id">Este div tiene el ID "mi-id"</div>

En este caso, el elemento con el ID «mi-id» tendrá los estilos especificados en la regla CSS.

Selectores de atributo

Los selectores de atributo permiten seleccionar elementos HTML en función de los valores de sus atributos. Se puede seleccionar elementos con un atributo específico, un atributo cuyo valor coincide con una cadena determinada, o un atributo cuyo valor comienza o termina con una cadena determinada. A continuación se presentan algunos ejemplos:

/* Selecciona todos los elementos con el atributo "target" */
[target] {
  /* Estilos aplicados a todos los elementos con el atributo "target" */
}

/* Selecciona todos los elementos con el atributo "href" y su valor contiene la cadena "https://" */
[href*="https://"] {
  /* Estilos aplicados a todos los elementos con el atributo "href" que contienen "https://" en su valor */
}

/* Selecciona todos los elementos con el atributo "src" y su valor comienza con "img/" */
[src^="img/"] {
  /* Estilos aplicados a todos los elementos con el atributo "src" cuyo valor comienza con "img/" */
}

/* Selecciona todos los elementos con el atributo "alt" y su valor termina con ".jpg" */
[alt$=".jpg"] {
  /* Estilos aplicados a todos los elementos con el atributo "alt" cuyo valor termina con ".jpg" */
}

Ejemplo:

<img src="img/foto1.jpg" alt="Foto 1 en jpg">
<a href="https://www.example.com" target="_blank">Enlace externo</a>

En este caso, el elemento «img» cuyo atributo «src» comienza con «img/» tendría los estilos especificados en la regla CSS, al igual que el enlace «a» cuyo atributo «href» contiene «https://» en su valor, y la imagen «img» cuyo atributo «alt» termina con «.jpg».

Selectores descendientes

Los selectores descendientes permiten seleccionar elementos HTML que son descendientes directos o indirectos de otro elemento específico. Se utilizan para aplicar estilos a elementos que están anidados dentro de otros elementos. El selector descendiente se denota con un espacio entre los nombres de las etiquetas:

elemento-padre elemento-hijo {
  /* Estilos aplicados a todos los elementos-hijo que son descendientes del elemento-padre */
}

Ejemplo:

<div class="contenedor">
  <h2>Título</h2>
  <p>Párrafo</p>
</div>

.contenedor h2 {
  /* Estilos aplicados a todos los elementos h2 que son descendientes directos del elemento con la clase "contenedor" */
}

En este caso, el estilo se aplicaría solo al elemento «h2» que es un descendiente directo del elemento con la clase «contenedor».

Selectores de hijo

Los selectores de hijo se utilizan para seleccionar elementos que son hijos directos de un elemento padre específico. El formato del selector de hijo es el siguiente:

elemento-padre > elemento-hijo {
  /* Estilos aplicados a todos los elementos-hijo que son hijos directos del elemento-padre */
}

Ejemplo:

<ul class="lista">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

.lista > li {
  /* Estilos aplicados a todos los elementos "li" que son hijos directos de elementos con la clase "lista" */
}

En este caso, se aplicarán los estilos a todos los elementos «li» que son hijos directos de elementos con la clase «lista».

Selectores de hermanos adyacentes

Los selectores de hermanos adyacentes se utilizan para seleccionar elementos que son hermanos adyacentes de otro elemento. Es decir, seleccionan el segundo elemento solo si está directamente después del primer elemento en el mismo nivel en el DOM. El formato del selector de hermanos adyacentes es el siguiente:

elemento-anterior + elemento-siguiente {
  /* Estilos aplicados al elemento-siguiente si es un hermano adyacente del elemento-anterior */
}

Ejemplo:

<p>Primer párrafo</p>
<p>Segundo párrafo</p>

p + p {
  /* Estilos aplicados al segundo párrafo solo si es un hermano adyacente del primer párrafo */
}

En este caso, se aplicarán los estilos al segundo párrafo, pero solo si es un hermano adyacente del primer párrafo.

Selectores de hermanos generales

Los selectores de hermanos generales se utilizan para seleccionar elementos que son hermanos de otro elemento, independientemente de su posición en el DOM. El formato del selector de hermanos generales es el siguiente:

elemento-anterior ~ elemento-siguiente {
  /* Estilos aplicados al elemento-siguiente si es un hermano del elemento-anterior */
}

Ejemplo:

<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>

p ~ p {
  /* Estilos aplicados a todos los párrafos que son hermanos de otros párrafos */
}

En este caso, se aplicarán los estilos a todos los párrafos que son hermanos de otros párrafos.

Selector «nth-child»

El selector «nth-child» se utiliza para seleccionar elementos en función de su posición ordinal entre sus hermanos directos. Puede especificar un número exacto, fórmulas matemáticas o palabras clave como «odd» (impares) o «even» (pares). El formato del selector «nth-child» es el siguiente:

elemento-padre:nth-child(n) {
  /* Estilos aplicados a todos los elementos-padre que son el n-ésimo hijo entre sus hermanos */
}

Ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ul>

ul li:nth-child(2n) {
  /* Estilos aplicados a todos los elementos "li" que son los segundos elementos hermanos (pares) dentro de la lista "ul" */
}

En este caso, se aplicarán los estilos a los elementos «li» que son los segundos elementos hermanos (pares) dentro de la lista «ul».

Selector «nth-last-child»

El selector «nth-last-child» es similar al selector «nth-child», pero cuenta los elementos desde el final en lugar de contar desde el principio. El formato es el siguiente:

elemento-padre:nth-last-child(n) {
  /* Estilos aplicados a todos los elementos-padre que son el n-ésimo hijo contando desde el final entre sus hermanos */
}

Ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ul>

ul li:nth-last-child(2n) {
  /* Estilos aplicados a todos los elementos "li" que son los segundos elementos hermanos (pares) desde el final de la lista "ul" */
}

En este caso, se aplicarán los estilos a los elementos «li» que son los segundos elementos hermanos (pares) desde el final de la lista «ul».

Selector «nth-of-type»

El selector «nth-of-type» se utiliza para seleccionar elementos en función de su posición ordinal entre sus hermanos del mismo tipo de etiqueta. El formato del selector «nth-of-type» es el siguiente:

elemento-padre:nth-of-type(n) {
  /* Estilos aplicados a todos los elementos-padre que son el n-ésimo elemento del mismo tipo entre sus hermanos */
}

Ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <p>Párrafo 1</p>
  <li>Elemento 3</li>
  <p>Párrafo 2</p>
</ul>

ul li:nth-of-type(2n) {
  /* Estilos aplicados a todos los elementos "li" que son los segundos elementos "li" dentro de la lista "ul" */
}

En este caso, se aplicarán los estilos a los elementos «li» que son los segundos elementos «li» dentro de la lista «ul», ignorando los párrafos.

Selector «nth-last-of-type»

El selector «nth-last-of-type» es similar al selector «nth-of-type», pero cuenta los elementos desde el final en lugar de contar desde el principio. El formato es el siguiente:

elemento-padre:nth-last-of-type(n) {
  /* Estilos aplicados a todos los elementos-padre que son el n-ésimo elemento del mismo tipo contando desde el final entre sus hermanos */
}

Ejemplo:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <p>Párrafo 1</p>
  <li>Elemento 3</li>
  <p>Párrafo 2</p>
</ul>

ul li:nth-last-of-type(2n) {
  /* Estilos aplicados a todos los elementos "li" que son los segundos elementos "li" desde el final de la lista "ul" */
}

En este caso, se aplicarán los estilos a los elementos «li» que son los segundos elementos «li» desde el final de la lista «ul», ignorando los párrafos.

Selector «first-child» y «last-child»

Además de los selectores «nth-child» y sus variantes, CSS3 también proporciona los selectores «first-child» y «last-child». Estos selectores permiten seleccionar el primer hijo y el último hijo de un elemento padre, respectivamente.

El formato del selector «first-child» es el siguiente:

elemento-padre:first-child {
  /* Estilos aplicados al primer hijo del elemento-padre */
}

El formato del selector «last-child» es el siguiente:

elemento-padre:last-child {
  /* Estilos aplicados al último hijo del elemento-padre */
}

Ejemplo:

<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>

ul li:first-child {
  /* Estilos aplicados al primer elemento "li" dentro de la lista "ul" */
}

ul li:last-child {
  /* Estilos aplicados al último elemento "li" dentro de la lista "ul" */
}

En este caso, se aplicarán los estilos al primer elemento «li» y al último elemento «li» dentro de la lista «ul».

Selectores de pseudo-clases

Las pseudo-clases son selectores especiales que se utilizan para aplicar estilos a elementos en estados específicos o que cumplen ciertas condiciones. Algunos ejemplos de pseudo-clases son «:hover» (cuando el cursor se coloca sobre el elemento), «:active» (cuando el elemento está siendo pulsado), «:first-child» (cuando el elemento es el primer hijo de su elemento padre), entre otros. A continuación se presentan algunos ejemplos:

/* Estilos aplicados a los elementos "a" cuando se les pasa el cursor encima */
a:hover {
  /* Estilos aplicados a los elementos "a" en estado de hover */
}

/* Estilos aplicados al primer hijo "p" de cualquier elemento */
:p-first-child {
  /* Estilos aplicados al primer hijo "p" de cualquier elemento */
}

/* Estilos aplicados a los elementos "input" de tipo "text" cuando están activos */
input[type="text"]:active {
  /* Estilos aplicados a los elementos "input" de tipo "text" en estado activo */
}

Ejemplo:

<a href="https://www.example.com">Enlace</a>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<input type="text" placeholder="Ingrese su nombre">

En este caso, los estilos se aplicarían al elemento «a» cuando se pasa el cursor sobre él, al primer hijo «p» de cualquier elemento, y a los elementos «input» de tipo «text» cuando están activos.

Selectores de pseudo-elementos

Los pseudo-elementos son selectores especiales que permiten crear elementos ficticios dentro de otros elementos, que se comportan como si fueran elementos HTML reales, pero se crean puramente con CSS. Algunos ejemplos de pseudo-elementos son «::before» (crea un elemento ficticio antes del contenido del elemento seleccionado) y «::after» (crea un elemento ficticio después del contenido del elemento seleccionado). A continuación se presentan algunos ejemplos:

/* Estilos aplicados al contenido antes del elemento "h1" */
h1::before {
  /* Estilos aplicados al contenido antes del elemento "h1" */
  content: "Antes del título: ";
}

/* Estilos aplicados al contenido después del elemento "p" con la clase "destacado" */
p.destacado::after {
  /* Estilos aplicados al contenido después del elemento "p" con la clase "destacado" */
  content: " (Destacado)";
}

Ejemplo:

<h1>Título principal</h1>
<p class="destacado">Texto destacado</p>

En este caso, se aplicarían los estilos al contenido antes del elemento «h1» y al contenido después del elemento «p» con la clase «destacado».

Conclusión

Los selectores de CSS3 son una poderosa herramienta que permite aplicar estilos a elementos HTML de forma precisa y selectiva. En este artículo, hemos cubierto varios tipos de selectores de CSS3, incluyendo selectores de tipo, selectores de clase, selectores de ID, selectores de atributo, selectores descendientes, y selectores de pseudo-clases y pseudo-elementos, junto con ejemplos de cómo se utilizan en la práctica.

Es importante tener un buen entendimiento de los selectores de CSS3, ya que son fundamentales en el desarrollo de sitios web y aplicaciones web con diseños atractivos y funcionales. Esperamos que este artículo te haya proporcionado una comprensión clara de los diferentes tipos de selectores de CSS3 y cómo se utilizan en la creación de estilos en la web.