Tipos de Selectores

Los selectores son uno de los conceptos más importantes en CSS, ya que nos permiten seleccionar los elementos HTML a los que queremos aplicar estilos. En este artículo, vamos a explorar los diferentes tipos de selectores disponibles en CSS.

Selectores básicos

Selector universal

El selector universal selecciona todos los elementos de la página.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Selector de tipo o etiqueta

Selecciona todos los elementos que coincidan con el nombre de la etiqueta especificada.

p {
  color: blue;
}

h1 {
  font-size: 24px;
}

div {
  background-color: #f0f0f0;
}

Selector de clase

Selecciona todos los elementos que tengan el atributo class con el valor especificado.

.destacado {
  color: red;
  font-weight: bold;
}

.contenedor {
  width: 80%;
  margin: 0 auto;
}

Ejemplo en HTML:

<p class="destacado">Este texto está destacado</p>
<div class="contenedor">Este es un contenedor</div>

Selector de ID

Selecciona el elemento que tenga el atributo id con el valor especificado. Recuerda que los IDs deben ser únicos en un documento HTML.

#principal {
  background-color: yellow;
}

#cabecera {
  height: 80px;
}

Ejemplo en HTML:

<div id="principal">Este es el contenido principal</div>
<header id="cabecera">Esta es la cabecera</header>

Selectores combinadores

Selector descendiente

Selecciona todos los elementos que son descendientes de otro elemento.

article p {
  font-style: italic;
}

Este selector seleccionará todos los párrafos que estén dentro de un artículo, sin importar cuán profundamente anidados estén.

<article>
  <p>Este párrafo estará en itálica</p>
  <div>
    <p>Este párrafo también estará en itálica</p>
  </div>
</article>
<p>Este párrafo NO estará en itálica</p>

Selector hijo directo

Selecciona elementos que son hijos directos de otro elemento.

ul > li {
  list-style-type: square;
}

Este selector solo afectará a los elementos li que sean hijos directos de un ul.

<ul>
  <li>Este elemento tendrá viñeta cuadrada</li>
  <li>Este elemento también tendrá viñeta cuadrada
    <ul>
      <li>Este elemento NO tendrá viñeta cuadrada (a menos que haya herencia)</li>
    </ul>
  </li>
</ul>

Selector de hermano adyacente

Selecciona un elemento que está inmediatamente después de otro elemento.

h2 + p {
  font-weight: bold;
}

Este selector solo afectará a los párrafos que vengan inmediatamente después de un encabezado h2.

<h2>Título</h2>
<p>Este párrafo estará en negrita</p>
<p>Este párrafo NO estará en negrita</p>

Selector de hermanos generales

Selecciona elementos que son hermanos de otro elemento (están al mismo nivel).

h2 ~ p {
  color: green;
}

Este selector afectará a todos los párrafos que sean hermanos de un h2 y vengan después de él.

<h2>Título</h2>
<p>Este párrafo será verde</p>
<div>Un div</div>
<p>Este párrafo también será verde</p>

Selectores de atributos

Selector de atributo simple

Selecciona elementos que tienen un atributo específico.

[disabled] {
  opacity: 0.5;
}

Selector de atributo con valor exacto

Selecciona elementos con un atributo que tiene un valor específico.

[type="text"] {
  border: 1px solid blue;
}

Selector de atributo que contiene un valor

Selecciona elementos con un atributo que contiene un valor específico.

[class*="btn"] {
  cursor: pointer;
}

Este selector afectará a cualquier elemento cuya clase contenga "btn", como "btn-primary", "my-btn", etc.

Pseudo-clases

Las pseudo-clases permiten aplicar estilos a elementos en estados específicos.

Pseudo-clases de interacción

a:hover {
  text-decoration: underline;
}

button:active {
  transform: scale(0.98);
}

input:focus {
  border-color: blue;
}

Pseudo-clases estructurales

li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

li:nth-child(odd) {
  background-color: #f0f0f0;
}

li:nth-child(even) {
  background-color: #e0e0e0;
}

p:first-of-type {
  font-size: larger;
}

Pseudo-elementos

Los pseudo-elementos permiten aplicar estilos a partes específicas de un elemento.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

p::first-line {
  font-variant: small-caps;
}

p::before {
  content: "→ ";
  color: red;
}

p::after {
  content: " ←";
  color: blue;
}

::selection {
  background-color: yellow;
  color: black;
}

Especificidad y cascada

Es importante entender que los selectores tienen diferentes niveles de especificidad:

1. Selectores de ID (más específico)
2. Selectores de clase, atributos y pseudo-clases
3. Selectores de tipo y pseudo-elementos (menos específico)

Cuando hay conflictos entre selectores, el más específico gana. Si tienen la misma especificidad, el último declarado en el código será el que se aplique.

Ejemplo práctico: Estilizando una tarjeta de producto

Veamos un ejemplo completo utilizando diferentes tipos de selectores:

<div class="card" id="producto-destacado">
  <div class="card-header">
    <h2>Smartphone XYZ</h2>
    <span class="badge new">Nuevo</span>
  </div>
  <div class="card-body">
    <img src="smartphone.jpg" alt="Smartphone XYZ">
    <p class="description">Un smartphone potente con cámara de alta resolución.</p>
    <ul class="features">
      <li>Pantalla OLED de 6.5"</li>
      <li>Cámara 48MP</li>
      <li>Batería 5000mAh</li>
    </ul>
  </div>
  <div class="card-footer">
    <p class="price">$999</p>
    <button type="button" class="btn-primary">Comprar ahora</button>
    <button type="button" class="btn-secondary">Añadir al carrito</button>
  </div>
</div>

/* Selector de ID */
#producto-destacado {
  border: 2px solid gold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Selector de clase */
.card {
  max-width: 300px;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
}

/* Selectores descendientes */
.card .badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* Selector de clase específico */
.badge.new {
  background-color: green;
  color: white;
}

/* Selector de hijo directo */
.card > div {
  padding: 16px;
}

/* Combinación de selectores */
.card-header h2 {
  margin: 0;
  font-size: 18px;
}

/* Selector de atributo */
[type="button"] {
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* Selectores de clase con prefijo común */
[class*="btn-"] {
  font-weight: bold;
}

/* Clases específicas */
.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

/* Pseudo-clases */
.btn-primary:hover {
  background-color: darkblue;
}

.btn-secondary:hover {
  background-color: darkgray;
}

/* Pseudo-elementos */
.price::before {
  content: "Precio: ";
  font-weight: normal;
}

/* Selectores de hermanos adyacentes */
.btn-primary + .btn-secondary {
  margin-left: 8px;
}

/* Selector de tipo con pseudo-clase estructural */
.features li:nth-child(odd) {
  background-color: #f9f9f9;
}

Este ejemplo muestra cómo combinar diferentes tipos de selectores para crear un componente de interfaz de usuario completo y bien estilizado.