los CSS selector de clases coincide con elementos basados ​​en el contenido de su class atributo.

/* All elements with */
.spacious {
  margin: 2em;
}

/* All <li> elements with */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, */
li.spacious.elegant {
  margin: 2em;
}

Sintaxis

.class_name { style properties }

Tenga en cuenta que esto es equivalente a lo siguiente attribute selector:

[class~=class_name] { style properties }

Ejemplos de

CSS

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

HTML

<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>

Resultado

Especificaciones

Especificación Estado Comentario
Selectores Nivel 4
La definición de ‘selectores de clase’ en esa especificación.		 Borrador de trabajo Sin cambios
Selectores Nivel 3
La definición de ‘selectores de clase’ en esa especificación.		 Recomendación
CSS Nivel 2 (Revisión 1)
La definición de ‘selectores secundarios’ en esa especificación.		 Recomendación
Nivel 1 de CSS
La definición de ‘selectores secundarios’ en esa especificación.		 Recomendación Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
Class_selectors 1 12 1 3 3,5 1 ≤37 18 4 10.1 1 1.0

Ver también