Un selector CSS indica a qué elementos HTML debe aplicarse una regla visual. Por ejemplo, p selecciona los párrafos, .boton los elementos con una clase y #cabecera un elemento con un ID concreto.
p { color: #243449; }
.boton { background: #a7e968; }
#cabecera { padding: 24px; }Tipos de selectores CSS básicos
| Selector | Selecciona | Ejemplo |
|---|---|---|
| Etiqueta | Todos los elementos de un tipo | h2 |
| Clase | Elementos con clase concreta | .tarjeta |
| ID | Elemento con ese identificador | #contacto |
| Universal | Todos los elementos | * |
| Atributo | Elementos con un atributo o valor | [type="email"] |
| Agrupación | Varios selectores a la vez | h1, h2 |
Las clases son muy útiles para componentes reutilizables. Evita diseñar una interfaz basada en muchos ID: incrementan la especificidad y complican modificaciones posteriores.
<section class="tarjeta destacada" id="producto-uno">
<h2>Servicio de diseño web</h2>
<p>Una página rápida y accesible.</p>
</section>
<style>
.tarjeta { border: 1px solid #ddd; }
.tarjeta.destacada { border-color: green; }
#producto-uno { border-radius: 12px; }
</style>Combinadores: hijos, descendientes y hermanos
Los combinadores expresan la relación entre elementos en el documento.
| Selector | Qué significa |
|---|---|
nav a | Todos los enlaces descendientes del nav |
nav > a | Enlaces que son hijos directos de nav |
h2 + p | Primer párrafo hermano inmediatamente posterior a h2 |
h2 ~ p | Párrafos hermanos posteriores al h2 |
<div class="contenedor">
<p>Primer párrafo</p>
<section><p>Párrafo anidado</p></section>
</div>
<style>
.contenedor p { color: navy; } /* Ambos */
.contenedor > p { font-weight: bold; } /* Solo el primero */
</style>Pseudoclases, pseudoelementos y selectores modernos
Una pseudoclase selecciona elementos por su estado o posición, mientras que un pseudoelemento permite estilizar partes conceptuales de un elemento.
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid green; }
li:first-child { font-weight: bold; }
input:invalid { border-color: #c93439; }
p::first-letter { font-size: 1.4em; }
.boton::before { content: "→ "; }Cómo funcionan :not(), :is(), :where() y :has()
.lista li:not(.oculto) { display: list-item; }
:is(h1, h2, h3) { line-height: 1.2; }
:where(.card, .panel) p { margin-top: 0; }
.formulario:has(input:invalid) { border-color: tomato; }:is() y :not() heredan la especificidad máxima de sus argumentos; :where() aporta especificidad cero. :has() resulta especialmente útil para aplicar estilos a un componente según sus descendientes, pero verifica el soporte de los navegadores que necesitas.
Especificidad CSS: por qué una regla gana a otra
Cuando varias declaraciones compiten, intervienen el origen, las capas, la importancia, la especificidad y el orden. Entre reglas normales del mismo contexto y capa, la especificidad suele explicar por qué una sobreescribe a otra.
p { color: blue; }
.aviso { color: red; }
#mensaje { color: green; }
/* Si el párrafo tiene id="mensaje" y class="aviso",
la regla #mensaje suele ganar en el mismo contexto. */La especificidad no es toda la cascada. !important, @layer, los estilos inline y las reglas del origen del navegador también influyen. Organiza los componentes antes de recurrir a excepciones.
Ejemplos reales de personalización de una web
Estilizar solo enlaces dentro del menú
.menu-principal > a {
color: #13253d;
padding: .75rem;
}
.menu-principal > a:focus-visible {
outline: 2px solid #79be48;
}Destacar campos con errores
input[aria-invalid="true"] {
border: 2px solid #c23832;
}
input[aria-invalid="true"]:focus-visible {
outline-offset: 2px;
}Modificar una tarjeta sin afectar a todas
.tarjeta-servicio { padding: 1.5rem; }
.tarjeta-servicio--destacada { background: #eef9e6; }Buenas prácticas al escribir CSS
- Prefiere clases para componentes y modificadores fáciles de reutilizar.
- Evita selectores excesivamente largos dependientes de una estructura HTML frágil.
- Prueba el foco de teclado, no solo
:hover. - Usa herramientas de desarrollador para ver qué declaración prevalece.
- Comprueba en móvil: estilos correctos no equivalen automáticamente a un diseño responsive.
Preguntas frecuentes
¿Qué diferencia hay entre una clase y un ID en CSS?
Una clase se reutiliza en distintos elementos; un ID identifica un elemento concreto del documento y tiene una especificidad mayor.
¿Para qué sirve el selector > en CSS?
Selecciona los hijos directos de un elemento, a diferencia del espacio, que también alcanza descendientes anidados.
¿Cuándo utilizar :where()?
Es útil para reglas base que quieras sobrescribir con facilidad, porque su especificidad es cero.
¿Qué hace :has() en CSS?
Permite seleccionar un elemento en función de otras condiciones, como que contenga un campo inválido. Revisa la compatibilidad con tu público.
Fuentes y documentación oficial
Una web útil, rápida y preparada para convertir.
Si tu proyecto necesita una nueva web, mejorar su rendimiento o resolver problemas técnicos, estudiaremos una solución adaptada.
Solicitar información ↗