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]