id e class em CSS
Use o seletor ID do CSS para identificar um único elemento HTML ao qual pretende aplicar estilo. Para vários elementos, utilize o seletor de classe. Veja os exemplos.
No capítulo anterior, aprendemos sobre os seletores. Agora vamos falar sobre os seletores id e class, que são frequentemente utilizados para aplicar estilo aos elementos de uma página web.
Seletor id em CSS
Um seletor ID é um identificador único do elemento HTML ao qual deve ser aplicado um determinado estilo. É utilizado apenas quando um único elemento HTML da página web tem de ter um estilo específico.
Tanto nas folhas de estilo internas como externas, utilizamos um cardinal (#) para o seletor id.
Exemplo de um seletor ID:
Seletor ID CSS para um elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Como pode ver, atribuímos blue como seletor id do segundo parágrafo (id="blue") e declarámos o seu estilo utilizando a propriedade color — #blue {color: #1c87c9;} na secção <head>. Isto significa que o elemento HTML com o seletor id blue será apresentado em #1c87c9.
Experimente este código no nosso editor HTML online para verificar que a cor do segundo parágrafo é #1c87c9.
Seletor class em CSS
Um seletor de classe é utilizado quando o mesmo estilo tem de ser aplicado a vários elementos HTML na mesma página web.
Tanto nas folhas de estilo internas como externas, utilizamos um ponto (.) para o seletor de classe.
Exemplo de um seletor de classe:
Exemplo de seletor de classe CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>No nosso exemplo, um seletor de classe é utilizado duas vezes, no título e no parágrafo.
Como pode ver, atribuímos blue como seletor de classe (class="blue") e declarámos o seu estilo utilizando a propriedade color — .blue {color: #1c87c9;} na secção <head>. Isto significa que os elementos que têm o seletor de classe blue serão apresentados em #1c87c9.
No nosso exemplo, o título e o terceiro parágrafo são #1c87c9. Verifique-o no nosso editor HTML online.
A diferença entre ID e class
A diferença entre IDs e classes é que o primeiro é único e a segunda não. Isto significa que cada elemento só pode ter um ID e cada página só pode ter um elemento com esse ID. Se utilizar o mesmo ID em vários elementos, o código não passará na validação. Mas, como as classes não são únicas, a mesma classe pode ser utilizada em vários elementos e, inversamente, pode utilizar várias classes no mesmo elemento.