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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Class selector (.className)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support