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 ⁨julho de 2015⁩.

Oseletor de classesCSS corresponde aos elementos com base no conteúdo de seus atributosclass.

css

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

Sintaxe

.classe_nome { propriedades de estilo }

Observe que isso é o mesmo queseletor 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>Este parágrafo tem o texto vermelho.</p><p>  Este parágrafo possui texto em vermelho e fundo amarelo.</p><p>  Este parágrafo possui texto em vermelho e uma propriedade de estilo  "elegante".</p><p>Este é um parágrafo comum.</p>