Class selector - Criando seu próprio seletor de classe em CSS

Neste tutorial de CSS, iremos aprender um dos conceitos mais importantes e usados desta linguagem de estilo: o seletor class, que irá nos proporcionar uma incrível flexibilidade e poder sobre cada trecho de código de nossos sites.

• Apostila HTML Progressivo: Fazer download

O problema com os seletores de tag em CSS

No tutorial passado de nosso Curso de CSS, aprendemos sobre os seletores.
Com esta importante e conhecida ferramenta do Cascading Style Sheets, podemos ter acesso as tags de um documento HTML, de qualquer parte de um site, seja ele pequeno ou um mega portal.

Vimos como mudar a cor, fonte e o que mais quisermos dos títulos (<title>), cabeçalhos (<h1>, <h2>, <h3>, <h4> etc) e até mesmo o controle sobre os parágrafos podemos ter, se soubermos usar os selectors em CSS.

Note, porém, que trabalhamos apenas com as tags nativas do HTML. Ou seja, aplicamos os estilos através do CSS somente nos trechos que tinham tags específicas de HTML.
Imagina que você queira que seu primeiro parágrafo seja diferente, uma fonte de tipo diferente, pois ele se trata de uma citação, uma frase.

E se você quiser que a primeira tag H1 tenha um um tamanho maior que as outras tags H1 irão aparecer? Como mudar isso? Diretamente em todas as tags seria um trabalho muito braçal.

Talvez você queira que a cor dos títulos da seção de esportes seja verde, e os mesmos títulos do site, mas na seção de notícias, sejam vermelhos.
Ora, no fim das contas são todos <title>, como diferenciar cada uma dessas tags?

Usando o seletor class podemos definir quaisquer trechos de nossos códigos HTML, que podem facilmente ser identificados pelo CSS, nos dando o poder de selecionar qualquer parte de nosso site.

class - O que é e como usar o seletor de classe em CSS

Usamos o conceito de classe em CSS quando queremos criar nosso próprios elementos, quando queremos nomear e identificar um determinado trecho de código em nossa página.

Assim, não ficamos preso as tags já existentes.
Poderemos agrupar e dar nome, por exemplo, ao primeiro parágrafo de cada texto.
Podemos identificar um texto e uma imagem com um determinado nome.

Se quisermos fazer um menu na lateral, podemos criar uma classe com aqueles links e aplicar efeitos neles, que são efeitos diferentes daqueles links dentro dos artigos, que são diferente dos efeitos dos links no rodapé.

Enfim, usando as class em CSS podemos definir qualquer trecho de código, dar a ele o nome que quisermos e aplicar regras de estilo CSS a este trecho separadamente.

O primeiro passo para o uso da class em um código HTML é usar o atributo class que recebe o valor que quisermos, ou seja, o nome que quisermos dar aquela classe:

<TAG class="classe">

Exemplo:

<p class="primeiro-paragrafo"> .. </p>
<title class="tituloPrincipal"> ... </title>

Pronto. Definida a classe (região do código), vamos fazer com que o CSS atue nela.
Isto será feito praticamente da mesma maneira que fizemos quando ensinamos a usar seletores em CSS, a única diferença é que lá usávamos os nomes das tags.

Aqui, vamos usar os nomes (valores) que demos ao atributo class, com um PONTO ( . ) antes desse nome.
Assim, para criarmos regras em CSS para os exemplos de classes que demos, faremos:

.classe{
  regras CSS;
}
 
.primeiro-paragrafo{
  regras CSS;
}
 
.tituloPrincipal{
  regras CSS;
}

Então, pode existir um milhão de parágrafos no seu artigo com a tag <p>, mas o CSS vai agir somente naquele que tem o atributo class e de nome "primeiro-pagrafo", assim como você pode ter milhares de páginas, cada uma com título diferente, mas somente os títulos (<title>) que tiverem o atribuo class com o valor 'tituloPrincipal" é que terão aquele efeito específico de CSS.

Exemplos de uso do seletor de Classe em CSS

Agora que já aprendemos a usar o class selector, vamos ver um exemplo prático de código HTML & CSS, ilustrando o uso das classes.

Vamos fazer um exemplo simples, onde criaremos uma página HTML com 4 parágrafos, onde 3 destes usam a tag <p> normalmente, e um deles usa essa tag com o atributo class, onde iremos nomear nossa classe com o nome "especial".

Ou seja, temos 4 parágrafos, e apenas um deles é 'especial', pois tem um nome, um atributo class.
Nosso código HTML é:

<!DOCTYPE html>
 
<html>
 <head>
  <title>Seletor do tipo class em CSS</title>
  <meta name="description" content="Como usar o seletor de classe">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <link rel="stylesheet" type="text/css" href="estilo.css"/>
  </head>
 
 <body>
  <p>Parágrafo normal</p>
  <p>Mais um parágrafo</p>
  <p class="especial">Parágrafo com a class="especial"</p>
  <p>Último parágrafo, também sem estilo</p>
 </body>

</html>

Como podem ver, linkamos um arquivo do tipo .css, uma folha de estilo de nome "estilo.css"
Nesse arquivo iremos definir o estilo que vai atuar nos elementos que possuem a classe de nome "especial".
Ou seja, para atuar nessa class, usamos o comando ".especial{ ...}"

Vamos, por exemplo, fazer com que esse elemento ".especial" tenha uma cor de background azul:

.especial{ background-color: #0000ff; }

Rode e veja como apenas um dos parágrafos, o que possui class="especial" é que recebe o estilo da folha de CSS.