Selecionando elementos por id único em CSS

Como você já sabe, as classes são destinadas a serem atribuídas a um grupo de elementos. Além das classes, também é possível selecionar elementos por id, que representa um identificador único do elemento. Por unicidade, entende-se que, se já temos um elemento com esse id na página, não deve haver outro elemento com o mesmo id.

O identificador único é definido usando o atributo id, onde escrevemos o nome que inventamos. Vamos, por exemplo, criar dois blocos. Para o primeiro, definiremos o id com o valor block1, e para o segundo - com o valor block2:

html<div id="block1">
  <p>text</p>
  <p>text</p>
</div>
<div id="block2">
  <p>text</p>
  <p>text</p>
</div>

Para selecionar um elemento com um id específico, é necessário escrever o símbolo # e o nome que inventamos, assim:

css#block1 {
  color: red;
}
#block2 {
  color: green;
}

html<div id="elem1">
  <h2>Título</h2>
  <p>
    texto
  </p>
  <p>
    texto
  </p>
</div>
<div id="elem2">
  <h2>Título</h2>
  <p>
    texto
  </p>
  <p>
    texto
  </p>
</div>
<div id="elem3">
  <h2>Título</h2>
  <p>
    texto
  </p>
  <p>
    texto
  </p>
</div>