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

Compatibilidade do navegador

BCD tables only load in the browser