¿Qué es?
El selector de clase se escribe con un punto seguido del nombre de la clase (.nombre) y selecciona a todos los elementos que tengan ese valor en su atributo class del HTML. Es el selector más usado en la práctica, porque es reutilizable: un mismo elemento puede tener varias clases, y una misma clase puede repetirse en muchos elementos distintos.
Ejemplo
<button class="btn">Guardar</button>
<a class="btn" href="/perfil">Ver perfil</a>.btn {
padding: 0.6rem 1.2rem;
border-radius: 6px;
background: #5b9bd5;
color: white;
}Tanto el <button> como el <a> reciben el mismo estilo, porque ambos comparten la clase .btn aunque sean etiquetas distintas.
Varias clases en un mismo elemento
Un elemento puede tener más de una clase, separadas por espacios en el HTML. En CSS, escribir dos selectores de clase pegados (sin espacio entre ellos) selecciona solo a los elementos que tengan ambas clases a la vez.
<button class="btn btn--primary">Confirmar</button>.btn {
padding: 0.6rem 1.2rem;
border-radius: 6px;
}
.btn.btn--primary {
background: #5b9bd5;
color: white;
}A tener en cuenta: Su especificidad es
0-1-0: le gana a cualquier selector de tipo, pero pierde contra un ID. Es el punto justo entre reutilizable y suficientemente específico, por eso se recomienda como la base de casi cualquier sistema de estilos.