Selector de clase de CSS

En CSS, los selectores de clase se muestran con un punto:

.center {text-align: center}

En el ejemplo anterior, todos los elementos HTML que tienen la clase center están alineados al centro.

En el código HTML siguiente, los elementos h1 y p tienen la clase center. Esto significa que ambos seguirán las reglas del selector ".center".

<h1 class="center">
Este encabezado también se alineará al centro
</h1>
<p class="center">
Este párrafo también se alineará al centro.
</p>

Atención:¡El primer carácter del nombre de la clase no puede ser un número! No funcionará en Mozilla ni Firefox.

Al igual que el id, la clase también puede ser utilizada como selector derivado:

.fancy td {
	color: #f60;
	fondo: #666;
	}

En este ejemplo, las celdas de tabla dentro de elementos más grandes con el nombre de clase fancy se mostrarán con texto naranja en fondo gris. (El elemento más grande con el nombre fancy puede ser una tabla o un div).

Los elementos también pueden seleccionarse basándose en su clase:

td.fancy {
	color: #f60;
	fondo: #666;
	}

En el ejemplo anterior, las celdas de tabla con el nombre de clase fancy tendrán un fondo naranja con un color gris.

<td class="fancy">

Puede asignar la clase fancy a cualquier elemento de tabla tantas veces como necesite. Todas las celdas marcadas con fancy tendrán un fondo naranja con un color gris. Las celdas que no se asignen la clase fancy no se verán afectadas por esta regla. Además, los párrafos con clase fancy no tendrán un fondo naranja con un color gris, y por supuesto, ningún otro elemento marcado como fancy se verá afectado por esta regla. Esto se debe a la forma en que escribimos esta regla, y este efecto se limita a las celdas de tabla marcadas como fancy (es decir, se seleccionan las clases fancy utilizando elementos td).

Contenido relacionado

Si necesita aprender más sobre los selectores de clase, lea los tutoriales avanzados en CodeW3C.com:Detalles del selector de clase de CSS.