CSS: Seleção por ID

Nesta página, estamos usando CSS

com o estilo de parágrafos "< h2 >"

de modo que todos os "< h2 >" são verdes
e todos os parágrafos são roxos.

Mas o que fazer para selecionar só
o primeiro "< h2 >"

ou apenas o estilo do segundo parágrafo?

Precisaríamos de uma maneira de dizer
ao navegador exatamente quais

elementos que estamos selecionando

pra que ele não aplique os estilos para
todos, como está agora.

Uma maneira de fazer isso é
selecionar pelo ID.

Podemos ter um 'tag' em nossa
página com uma ID

e então podemos dizer ao CSS:

"Escute aqui: Só quero aplicar esses
estilos para os elementos com estes IDs,

não em qualquer um dos
outros elementos".

Para isso, o primeiro passo é na realidade
modificar o HTML

para adicionar atributos ID para as tags
que desejamos selecionar especificamente.

Vamos começar com o segundo
parágrafo aqui.

Para adicionar um atributo ID,
colocamos o cursor

no início da tag "< p >" logo após o 'p',

em seguida, adicione um espaço,
e depois digite id = " "

Agora precisamos preencher este
atributo ID com um valor.

Que ID eu deveria dar?

Ele deve ser descritivo e único.

Nada mais nesta página deve
ter o mesmo ID.

Já que esta é uma canção sobre coelhos,
chamarei de canção-coelhos (rabbits-song).

Não pode ter espaços nas ID's, por isso,
se eles têm várias palavras como estas

você deve sempre usar hifens
ou sublinhados.

Eu mesmo gosto de hifens.

Agora temos uma maneira de identificar
esse ponto de forma exclusiva.

Assim, podemos adicionar uma
regra CSS.

Vamos voltar para a nossa tag "< style > "
para a segunda etapa.

Vamos adicionar uma nova linha
após a última regra.

Lembre-se, a primeira parte
de uma regra CSS é o seletor:

a parte que diz ao navegador
o que selecionar.

Até aqui, nas nossas regras anteriores
usamos seletores como "< h2 >" e "< p >"

para selecionar todos os
"< h2 >" e "< p >" na página.

Agora, para fazer um seletor que
só seleciona elementos

com um ID particular,

temos que começar o seletor
com um sinal " # ".

Isso informa ao navegador que tudo o que
vem a seguir é um ID.

Vamos escrever a nossa ID: canção-coelhos.

O resto da regra é a mesma de antes.

Abrimos e fechamos com chaves "{ }",

adicionamos uma propriedade,
como cor do fundo (background-color)...

...e pronto! Funcionou!

Somente o parágrafo canção
tem a cor de fundo amarelo,

e no primeiro parágrafo
permaneceu o mesmo.

Vamos fazer isso de novo,
primeiro para a seleção "< h2 >".

Consegue lembrar o primeiro passo?

Está certo. Precisamos na realidade
modificar este HTML

para adicionar o atributo "ID".

Colocamos nosso cursor na 'tag' de início,

damos um espaço, tipo id = " "

e, em seguida, digite um
ID único e descritivo.

Como "coelhos-info-titulo"
(rabbits-info-heading).

Segunda etapa.
Voltemos em nossa 'tag' de estilo

e adicionamos uma nova linha,
escreva o sinal " # ",

então o nosso ID, "coelhos-info-titulo"
(rabbits-info-heading).

e em seguida, colocamos nossas
propriedades dentro das chaves "{ "

background-color: purple; }
(cor-do-fundo: roxo)

Não funcionou. Quer ver o que deu errado?

Será que eu digitei do mesmo jeito?

rabbits-info-Heading,
rabbits-info-heading...

para que eles fiquem praticamente o mesmo.

Eu poderia compará-los letra por letra

para descobrir o que está errado,

mas eu gosto de fazer é só ir em baixo
e selecione a ID no HTML,

e copiar e colar aqui para ter certeza
que é exatamente o mesmo.

E...funcionou!

Meu "< h2 >" tem um fundo.
Você notou o que mudou?

Foi o "h". Os h's costumavam
ser um "H" maiúsculo

que o navegador não considera
ser a mesma coisa.

Tem de ser "h" minúsculo para
coincidir com o código HTML.

Isso é porque os ID's são case-sensitive.

Então você tem que escrevê-los da mesma
forma em todos os lugares.

Acho que é melhor usar sempre minúsculas
para cada letra em meus IDs

então não tenho que pensar
sobre que nome que usei.

Vou dar agora um último aviso:

IDs devem ser exclusivos!

Se você tem 2 tags em sua página
com exatamente a mesma ID

o navegador pode usar os dois,
mas também pode usar apenas um deles.

E você não quer que isso aconteça.

ID descritivos são bons e únicos.

Traduzido por [Fernando dos Reis]