Seletores de classe

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

/* 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

.vermelho {
  color: #f33;
}

.amarelo-bg {
  background: #ffa;
}

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

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

Especificação	Status	Comentário
Selectors Level 4 The definition of 'class selectors' in that specification.	Rascunho atual	Sem mudança
Selectors Level 3 The definition of 'class selectors' in that specification.	Recomendação
CSS Level 2 (Revision 1) The definition of 'child selectors' in that specification.	Recomendação
CSS Level 1 The definition of 'child selectors' in that specification.	Recomendação	Definição inicial

Compatibilidade com navegadores

BCD tables only load in the browser