Seletores de classe

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O seletor de classes CSS corresponde aos elementos com base no conteúdo de seus atributos class.

css
/* Todos os elementos com class="espaçoso" */
.espaçoso {
  margin: 2em;
}

/* Todos os elementos <li> com class="espaçoso" */
li.espaçoso {
  margin: 2em;
}

/* Todos os elementos <li> cujo conteúdo do atributo class possua "espaçoso" e "elegante" */
/* Por exemplo, class="elegante antigo espaçoso" */
li.espaçoso.elegante {
  margin: 2em;
}

Sintaxe

.classe_nome { propriedades de estilo }

Observe que isso é o mesmo que seletor de atributo:

[classe~=classe_nome] { propriedades de estilo  }

Exemplo

CSS

css
.vermelho {
  color: #f33;
}

.amarelo-bg {
  background: #ffa;
}

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

HTML

html
<p class="vermelho">Este parágrafo tem o texto vermelho.</p>
<p class="vermelho amarelo-bg">
  Este parágrafo possui texto em vermelho e fundo amarelo.
</p>
<p class="vermelho elegante">
  Este parágrafo possui texto em vermelho e uma propriedade de estilo
  "elegante".
</p>
<p>Este é um parágrafo comum.</p>

Resultado

Especificações

Specification
Selectors Level 4
# class-html

Compatibilidade com navegadores