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