Classe

No livro, aprendemos que podemos distinguir partes da página que tenham um significado específico com o atributo de classe. Por exemplo, os Nanonautas queriam poder estilizar as suas Dicas Top de maneira a que elas se destacassem na página, mas sem terem de estilizar cada uma individualmente. Para o fazerem, criaram uma classe chamada dica-top que podem aplicar a todos os elementos <p> (parágrafo) que quiserem.


p.dica-top {
  border: 4px solid #00AFEB;
  border-radius: 10px;
  padding: 16px;
  background-color: #C5EBFB;
}
p.dica-top::before {
  color: black;
  content: "DICA TOP: ";
  font-weight: bold;
}

A seguir eles acrescentaram esse estilo ao elemento de parágrafo <p> no HTML. Ficou assim:


<p class="dica-top">Tudo o que está dentro deste elemento tem agora a classe dica-top.</p>

Vejamos o que isto faz.

Na primeira regra acima, adicionámos:

  • Uma borda contínua (solid) e azul com 4 píxeis em torno do parágrafo.
  • Arestas curvas nessa borda.
  • Algum enchimento (padding) entre o texto e a borda.
  • Um fundo em azul mais claro no interior da borda.

A segunda regra contém algo que não vimos antes – ::before. Chama-se a isto um pseudo-elemento, que podes reconhecer devido ao duplo uso dos dois pontos.

Este pseudo-elemento diz ao navegador para inserir o conteúdo das regras ANTES (before) do conteúdo do elemento <p>. O conteúdo é o texto «DICA TOP: » em maiúsculas e a preto. Isto significa que não precisamos de adicionar esse texto às Dicas Top no HTML – ele é adicionado automaticamente pela classe dica-top.

Existem outros pseudo-elementos que se podem usar desta maneira:

  • ::first-line aplica a regra do conteúdo somente à primeira linha do texto de um elemento <p>.
  • ::first-letter só a aplica à primeira letra de um elemento <p>.
  • ::after insere o conteúdo da regra após o conteúdo do elemento <p>.
  • ::selection aplica o conteúdo da regra ao texto que seja seleccionado pelo utilizador.

E se quisermos aplicar mais de uma classe a um elemento? Bom, isso é fácil – podes aplicar tantas quantas quiseres. Digamos que definiste duas classes:

  • grande tem uma regra CSS para aumentar o tamanho da fonte.
  • maiusculas tem uma regra para pôr todo o texto em maiúsculas.

Podes adicionar ambas estas classes a um elemento <p> se as colocares separadas por um espaço no atributo class:


<p class="grande maiusculas">Este texto irá agora ser maior e aparecer em maiúsculas.</p>