CSS id y class
Aprende a usar el selector CSS ID para identificar un elemento HTML único y el selector class para aplicar estilos a varios elementos. Ver ejemplos.
En el capítulo anterior aprendimos sobre los selectores. Ahora hablaremos sobre los selectores id y class, que son los dos selectores basados en atributos a los que recurrirás con más frecuencia al dar estilo a una página web.
Este capítulo explica qué hace cada selector, cómo escribirlo, en qué se diferencian y — igual de importante — cuándo elegir uno sobre el otro.
Selector CSS id
Un selector id apunta al único elemento HTML cuyo atributo id coincide con el nombre indicado. Dado que un id debe ser único dentro de una página, el selector id está pensado para dar estilo a un elemento específico, no a un grupo de ellos.
Tanto en las hojas de estilo internas como externas, el selector id se escribe con un símbolo de almohadilla (#) seguido del valor del id: #nombre { ... }.
Ejemplo de un selector ID:
Selector CSS ID para un elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Aquí le asignamos al segundo párrafo el id blue (id="blue") y declaramos su estilo con la propiedad color — #blue { color: #1c87c9; } — dentro de la sección <head>. Solo ese elemento coincide, por lo que únicamente el segundo párrafo se vuelve azul; el primero y el tercero mantienen su color predeterminado.
Un valor de id no puede contener espacios y, por convención, no debería comenzar con un dígito. Abre el ejemplo en el editor para comprobar que solo el segundo párrafo es #1c87c9.
Selector CSS class
Un selector class apunta a todos los elementos cuyo atributo class contiene el nombre indicado. Úsalo cuando el mismo estilo deba aplicarse a varios elementos — por ejemplo, un estilo .warning compartido por varios avisos, o un estilo .btn reutilizado en muchos botones.
Tanto en las hojas de estilo internas como externas, el selector class se escribe con un punto (.) seguido del nombre de la clase: .nombre { ... }.
Ejemplo de un selector class:
Ejemplo de selector CSS Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Aquí la misma clase blue se aplica a dos elementos distintos — un encabezado y un párrafo (class="blue") — y se estiliza una sola vez con .blue { color: #1c87c9; }. Tanto el encabezado como el tercer párrafo se vuelven #1c87c9, mientras que el párrafo del medio (que no tiene clase) no se ve afectado. Definir la regla una sola vez y reutilizarla es exactamente para lo que sirven las clases.
Varias clases en un mismo elemento
Un elemento puede tener varias clases al mismo tiempo. Lístalас en el atributo class separadas por espacios, y se aplicará cada regla que coincida:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Esta composibilidad es la razón por la que las clases son el motor de CSS: clases pequeñas y de propósito único se pueden combinar y mezclar en toda la página.
La diferencia entre id y class
La distinción fundamental es la unicidad:
- Un id es único — cada elemento solo puede tener un id, y cada página debería contener únicamente un elemento con un id determinado. Reutilizar el mismo id en varios elementos produce HTML inválido y puede romper scripts y funciones de accesibilidad que esperan que los ids sean únicos.
- Una class es reutilizable — la misma clase puede aparecer en muchos elementos, y un único elemento puede tener muchas clases.
| id | class | |
|---|---|---|
| Símbolo en CSS | # | . |
| Veces por página | una | ilimitadas |
| Por elemento | un id | muchas clases |
| Uso típico | un elemento único (p. ej. la cabecera de página, un destino de ancla) | estilos repetidos, componentes |
Los ids también tienen más peso en la cascada que las clases. Cuando una regla de id y una regla de class apuntan al mismo elemento, la regla del id gana independientemente del orden de las fuentes — consulta la especificidad CSS a través de los selectores. Ese peso extra es una razón por la que muchas guías de estilo prefieren las clases para dar estilos y reservan los ids para enlaces internos de página (href="#seccion") y puntos de acceso de JavaScript.
¿Cuál debo usar?
En la práctica, usa clases para dar estilos. Son reutilizables, fáciles de sobreescribir y mantienen la especificidad baja y predecible. Recurre a un id solo cuando realmente necesites un identificador único para un elemento — para enlaces de fragmento, asociaciones label/for en formularios, o getElementById en JavaScript.