0:00:00.095,0:00:02.336
Nesta página, estamos usando CSS

0:00:02.336,0:00:04.600
com o estilo de parágrafos "< h2 >"

0:00:04.600,0:00:08.920
de modo que todos os "< h2 >" são verdes[br]e todos os parágrafos são roxos.

0:00:09.537,0:00:13.460
Mas o que fazer para selecionar só[br]o primeiro "< h2 >"

0:00:13.460,0:00:16.462
ou apenas o estilo do segundo parágrafo?

0:00:16.716,0:00:19.867
Precisaríamos de uma maneira de dizer[br]ao navegador exatamente quais

0:00:19.867,0:00:21.513
elementos que estamos selecionando

0:00:21.513,0:00:24.931
pra que ele não aplique os estilos para[br]todos, como está agora.

0:00:25.333,0:00:27.945
Uma maneira de fazer isso é[br]selecionar pelo ID.

0:00:28.265,0:00:30.525
Podemos ter um 'tag' em nossa[br]página com uma ID

0:00:30.525,0:00:32.176
e então podemos dizer ao CSS:

0:00:32.176,0:00:36.297
"Escute aqui: Só quero aplicar esses[br]estilos para os elementos com estes IDs,

0:00:36.297,0:00:38.208
não em qualquer um dos[br]outros elementos".

0:00:38.455,0:00:41.281
Para isso, o primeiro passo é na realidade[br]modificar o HTML

0:00:41.281,0:00:45.132
para adicionar atributos ID para as tags[br]que desejamos selecionar especificamente.

0:00:45.741,0:00:48.371
Vamos começar com o segundo[br]parágrafo aqui.

0:00:48.529,0:00:50.896
Para adicionar um atributo ID,[br]colocamos o cursor

0:00:50.896,0:00:53.415
no início da tag "< p >" logo após o 'p',

0:00:53.415,0:00:58.357
em seguida, adicione um espaço,[br]e depois digite id = " "

0:00:58.982,0:01:02.667
Agora precisamos preencher este[br]atributo ID com um valor.

0:01:02.812,0:01:04.180
Que ID eu deveria dar?

0:01:04.180,0:01:06.452
Ele deve ser descritivo e único.

0:01:06.508,0:01:09.229
Nada mais nesta página deve[br]ter o mesmo ID.

0:01:09.479,0:01:15.080
Já que esta é uma canção sobre coelhos,[br]chamarei de canção-coelhos (rabbits-song).

0:01:15.422,0:01:19.837
Não pode ter espaços nas ID's, por isso,[br]se eles têm várias palavras como estas

0:01:19.837,0:01:22.237
você deve sempre usar hifens[br]ou sublinhados.

0:01:22.596,0:01:24.717
Eu mesmo gosto de hifens.

0:01:25.650,0:01:28.941
Agora temos uma maneira de identificar[br]esse ponto de forma exclusiva.

0:01:29.016,0:01:31.646
Assim, podemos adicionar uma[br]regra CSS.

0:01:31.746,0:01:35.479
Vamos voltar para a nossa tag "< style > "[br]para a segunda etapa.

0:01:35.598,0:01:38.428
Vamos adicionar uma nova linha[br]após a última regra.

0:01:39.478,0:01:43.255
Lembre-se, a primeira parte[br]de uma regra CSS é o seletor:

0:01:43.255,0:01:45.840
a parte que diz ao navegador[br]o que selecionar.

0:01:46.098,0:01:51.130
Até aqui, nas nossas regras anteriores[br]usamos seletores como "< h2 >" e "< p >"

0:01:51.130,0:01:54.031
para selecionar todos os[br]"< h2 >" e "< p >" na página.

0:01:54.554,0:01:57.203
Agora, para fazer um seletor que[br]só seleciona elementos

0:01:57.203,0:01:58.671
com um ID particular,

0:01:58.671,0:02:00.862
temos que começar o seletor[br]com um sinal " # ".

0:02:01.293,0:02:04.547
Isso informa ao navegador que tudo o que[br]vem a seguir é um ID.

0:02:05.147,0:02:08.798
Vamos escrever a nossa ID: canção-coelhos.

0:02:09.603,0:02:11.882
O resto da regra é a mesma de antes.

0:02:11.934,0:02:13.722
Abrimos e fechamos com chaves "{ }",

0:02:13.722,0:02:17.844
adicionamos uma propriedade,[br]como cor do fundo (background-color)...

0:02:18.364,0:02:20.574
...e pronto! Funcionou!

0:02:20.873,0:02:23.934
Somente o parágrafo canção[br]tem a cor de fundo amarelo,

0:02:23.934,0:02:26.093
e no primeiro parágrafo[br]permaneceu o mesmo.

0:02:26.574,0:02:30.764
Vamos fazer isso de novo,[br]primeiro para a seleção "< h2 >".

0:02:31.133,0:02:32.866
Consegue lembrar o primeiro passo?

0:02:33.515,0:02:36.586
Está certo. Precisamos na realidade[br]modificar este HTML

0:02:36.586,0:02:38.145
para adicionar o atributo "ID".

0:02:38.300,0:02:40.693
Colocamos nosso cursor na 'tag' de início,

0:02:40.693,0:02:43.520
damos um espaço, tipo id = " "

0:02:43.580,0:02:46.691
e, em seguida, digite um[br]ID único e descritivo.

0:02:46.791,0:02:49.944
Como "coelhos-info-titulo"[br](rabbits-info-heading).

0:02:50.690,0:02:54.043
Segunda etapa.[br]Voltemos em nossa 'tag' de estilo

0:02:54.043,0:02:57.429
e adicionamos uma nova linha,[br]escreva o sinal " # ",

0:02:57.429,0:03:01.840
então o nosso ID, "coelhos-info-titulo"[br](rabbits-info-heading).

0:03:01.840,0:03:04.947
e em seguida, colocamos nossas[br]propriedades dentro das chaves "{ "

0:03:04.947,0:03:08.625
background-color: purple; }[br](cor-do-fundo: roxo)

0:03:08.945,0:03:13.260
Não funcionou. Quer ver o que deu errado?

0:03:13.420,0:03:15.279
Será que eu digitei do mesmo jeito?

0:03:15.359,0:03:18.305
rabbits-info-Heading,[br]rabbits-info-heading...

0:03:18.485,0:03:21.049
para que eles fiquem praticamente o mesmo.

0:03:21.160,0:03:23.374
Eu poderia compará-los letra por letra

0:03:23.374,0:03:25.079
para descobrir o que está errado,

0:03:25.079,0:03:29.633
mas eu gosto de fazer é só ir em baixo[br]e selecione a ID no HTML,

0:03:29.679,0:03:33.810
e copiar e colar aqui para ter certeza[br]que é exatamente o mesmo.

0:03:33.887,0:03:35.481
E...funcionou!

0:03:35.561,0:03:39.825
Meu "< h2 >" tem um fundo.[br]Você notou o que mudou?

0:03:40.085,0:03:44.474
Foi o "h". Os h's costumavam[br]ser um "H" maiúsculo

0:03:44.474,0:03:47.003
que o navegador não considera[br]ser a mesma coisa.

0:03:47.103,0:03:50.231
Tem de ser "h" minúsculo para[br]coincidir com o código HTML.

0:03:50.315,0:03:52.850
Isso é porque os ID's são case-sensitive.

0:03:52.930,0:03:57.143
Então você tem que escrevê-los da mesma[br]forma em todos os lugares.

0:03:57.513,0:04:01.753
Acho que é melhor usar sempre minúsculas[br]para cada letra em meus IDs

0:04:01.753,0:04:04.645
então não tenho que pensar[br]sobre que nome que usei.

0:04:05.158,0:04:08.404
Vou dar agora um último aviso:

0:04:08.404,0:04:10.530
IDs devem ser exclusivos!

0:04:10.648,0:04:13.444
Se você tem 2 tags em sua página[br]com exatamente a mesma ID

0:04:13.444,0:04:17.835
o navegador pode usar os dois,[br]mas também pode usar apenas um deles.

0:04:17.962,0:04:20.341
E você não quer que isso aconteça.

0:04:20.411,0:04:22.460
ID descritivos são bons e únicos.

0:04:22.248,0:04:25.000
Traduzido por [Fernando dos Reis]