As classes são seletores CSS, ou seja, corresponde ao(s) elemento(s) com base no conteúdo de seu atributo class no HTML. Para declararmos esse seletor devemos usar um ponto (.) seguido do conteúdo da classe.
.seletor {
propriedade: valor;
}Vamos ao seguinte exemplo dado este código HTML:
<div class="vermelho">Primeiro elemento</div>
<!-- Para colocar mais de uma classe no HTML é necessário separá-las com espaço -->
<div class="vermelho borda-azul">Primeiro elemento</div>Para estilizá-lo no CSS poderíamos selecionar as divs da seguinte maneira:
/* Qualquer elemento que o conteúdo de class possua "vermelho" */
.vermelho {
background-color: red;
}
/* Qualquer elemento <div> que o conteúdo de class possua "vermelho" */
div.vermelho {
background-color: red;
}
/* Qualquer elemento <div> que o conteúdo de class possua "vermelho" e "borda" */
div.vermelho.borda {
background-color: red;
border: 1px dotted white;
}Uma pseudo-classe é uma palavra-chave (também conhecida como palavra reservada) que é adicionada a seletores para especificar um estado especial do(s) elemento(s) selecionado(s). Para declararmos uma pseudo-classe usamos os dois pontos (:) seguido da pseudo-classe em questão.
A pseudo-classe pode ser um evento atrelado à árvore do DOM, como a :hover que é aplicada quando o mouse passa sobre o elemento selecionado, mas também pode ser em relação a fatores externos, como o histórico de navegação (:visited) ou um campo de formulário é obrigatório (:required) e muito mais.
seletor:pseudo-classe {
propriedade: valor;
}