Uso de id em CSS
Ao usar id, todas as manipulações
com seletores que aprendemos nas lições
anteriores estão disponíveis.
Exemplo
Suponha que temos o seguinte código:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Vamos selecionar o h2 do elemento com
id igual a block e colori-lo
de vermelho:
#block h2 {
color: red;
}
Agora, vamos selecionar o p do elemento com
id igual a block e colori-lo
de verde:
#block p {
color: green;
}
Exemplo
Suponha agora que temos o seguinte código:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Vamos selecionar os elementos com a classe
header, que estão dentro do elemento
com id igual a block,
e colori-los de vermelho:
#block .header {
color: red;
}
Agora, vamos selecionar os títulos h2
com a classe header, que estão dentro
do elemento com id igual a
block, e colori-los de vermelho:
#block h2.header {
color: red;
}
Problemas Práticos
Escreva um seletor que selecione todos os
h2 que estão dentro do elemento
com id igual a elem.
Teste seu seletor no seguinte código:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Escreva um seletor que selecione todos os
elementos com a classe text,
que estão dentro do elemento com
id igual a elem.
Teste seu seletor no seguinte código:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Escreva um seletor que selecione todos os
parágrafos com a classe text,
que estão dentro do elemento com
id igual a elem.
Teste seu seletor no seguinte código:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Escreva um seletor que selecione todos os
li com a classe text,
que estão dentro do elemento com
id igual a elem.
Teste seu seletor no seguinte código:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
