Los selectores de CSS3 amplían significativamente la capacidad de estilizar elementos basándose en sus atributos, estados, posición estructural o contenido. A continuación se explica su uso con precisión técnica y ejemplos reescritos para mayor claridad y corrección semántica.

Selectores por atributo

Su especificidad es de 10 puntos. No requieren que el valor del atributo coincida excatamente, sino que permiten coincidencias parciales o condicionales:

/* Coincidencia exacta (sin espacios ni múltiples valores) */
button[data-role="primary"] {
  border: 2px solid #007bff;
}

/* Coincidencia múltiple (ambos atributos deben estar presentes) */
input[type="text"][required] {
  outline: 1px solid orange;
}

/* Coincidencia en lista de valores separados por espacios */
span[data-tags~="urgent"] {
  font-weight: bold;
}

/* Comienza con un prefijo determinado */
header[id^="section-"] {
  background-color: #f8f9fa;
}

/* Termina con un sufijo específico */
a[href$=".pdf"] {
  color: #d9534f;
}

/* Contiene una subcadena en cualquier posición */
article[data-category*="web"] {
  opacity: 0.9;
}

Pseudo-clases dinámicas y de estado

También con especificidad de 10 puntos, permiten aplicar estilos según interacción o estado del elemento:

• :link — para enlaces no visitados
• :visited — solo aplica a enlaces ya navegados (con limitaciones de seguridad)
• :hover — activo mientras el puntero está sobre el elemento
• :active — durante la pulsación del botón del mouse
• :focus — cuando un elemento recibe foco (ej. campo de entrada)
• :checked — para <input type="checkbox"> o <input type="radio"> seleccionados
• :disabled — para controles inactivos

Pseudo-clases estructurales

Permiten seleccionar elementos según su posición relativa dentro del árbol DOM:

/* Raíz del documento */
:root {
  --base-spacing: 1rem;
}

/* Elementos sin hijos ni texto (ni incluso espacios en blanco) */
.card:empty {
  display: none;
}

/* Primer y último hijo directo de su contenedor */
nav > a:first-child { margin-left: 0; }
nav > a:last-child { margin-right: 0; }

/* Tercer elemento hijo, independientemente del tipo */
main > *:nth-child(3) { margin-top: 2rem; }

/* Cada tercer elemento (3, 6, 9...) */
ul > li:nth-child(3n) { list-style-type: square; }

/* Desde el sexto elemento en adelante */
section > p:nth-child(n+6) { font-size: 0.9em; }

/* Primeros nueve elementos */
aside > div:nth-child(-n+9) { padding: 0.5rem; }

/* Rango entre segundo y sexto */
.sidebar > button:nth-child(n+2):nth-child(-n+6) { width: 100%; }

/* Último elemento de su tipo */
footer > p:last-of-type { margin-bottom: 0; }

/* Tercer <h2> dentro de .content */
.content h2:nth-of-type(3) { border-top: 1px solid #dee2e6; }

/* Primer <img> dentro de .gallery */
.gallery img:first-of-type { border-radius: 4px; }

/* Último <span> contando desde el final */
.stats span:nth-last-of-type(2) { font-weight: 600; }

/* Elementos impares y pares */
table tr:nth-child(odd) { background-color: #f8f9fa; }
table tr:nth-child(even) { background-color: #e9ecef; }

/* Estilo aplicado al elemento objetivo de una URL fragmentaria (#id) */
#faq-section:target {
  animation: highlight 1s ease;
}

Pseudo-elementos

No son selectores de estado, sino representaciones de partes específicas del contenido (como el primer carácter o línea). Su sintaxis usa doble dos puntos (::) y tienen especificidad distinta (equivalente a un elemento simple). Ejemplos clave:

• ::first-line — primera línea de un bloque de texto
• ::first-letter — primera letra de un párrafo
• ::before y ::after — generan contenido antes o después del elemento
• ::placeholder — estilo del texto de marcador en campos de entrada

Selectores de relación

Definen contexto jerárquico entre elementos:

• div p — descendientes (cualquier nivel)
• div > p — hijos directos únicamente
• p + span — hermano adyacente inmediato
• p ~ span — hermanos posteriores (no necesariamente adyacentes)