Seletores de classe

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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;
}

.bonito{
  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 bonito">Este parágrafo possui texto em vermelho e uma propriedade de estilo "bonito".</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 do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Class selector (.className)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support