Identificadores e Classes

Nas seções anteriores, vimos alguns exemplos de tags (X)HTML usados como seletores. Mas não pense que apenas elementos podem ocupar tal papel. Além desses, atributos, valores, classes e identificadores também podem ser seletores.

Na Aula 2 desta disciplina, você aprendeu a criar classes através do atributo class. Você também aprendeu a utilizar o atributo id. Veremos, a seguir, que as definições criadas através desses atributos no seu código (X)HTML podem ser usadas para definir a estilização de uma página.

Usando classes como seletores

Esse seletor é bastante utilizado nas CSS. Quando você aplica uma classe, você associa um nome a um elemento. Para facilitar seu entendimento, veja como é feita a aplicação de classes a elementos (X)HTML.

A definição do estilo desses cabeçalhos pode ser feita escrevendo o elemento (h1) seguido de um ponto e o nome da classe, da seguinte maneira:

Ou ainda podemos omitir o elemento e definir apenas a classe, da seguinte maneira:

No exemplo anterior, temos dois cabeçalhos de nível h1. Cada um definido em uma classe diferente. Se sua página tivesse vários cabeçalhos nível 1 (h1) e você desejasse que metade deles (os que são em portugues) fosse de cor azul e a outra metade (os que são em ingles) de cor vermelha, você poderia definir classes para facilitar essa estilização e poderia estilizá-los utilizando apenas duas regras CSS, como mostrado anteriormente.

Dessa maneira, o seletor classe possibilita aplicar estilos diferentes a um mesmo elemento (X)HTML, ou o mesmo estilo a diferentes elementos.