Por que não usar o no HTML para o negrito ao invés de usar uma pseudo-classe no CSS?
Por que não usar o no HTML para o negrito ao invés de usar uma pseudo-classe no CSS?
Oi Camila!
As pseudo-classes :first-child
e :nth-child()
são utilizadas para que não seja necessário criar uma classe diferente para a estilização do negrito.
Neste exemplo de lista, todos os elementos tem a mesma classe:
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<ul>
Por algum motivo, foi pedido para que os números pares fossem colocados em negrito. Seguindo o que você sugeriu, o código ficaria assim:
<ul>
<li class="item">1</li>
<li class="item"><strong>2</strong></li>
<li class="item">3</li>
<li class="item"><strong>4</strong></li>
<ul>
Nesta lista pequena foi fácil colocar os elementos manualmente, mas imagine o trabalho caso fosse uma lista de 100 ou 1000 números. Seria muito trabalhoso e tedioso, não?
Outra forma de fazer isso é criar uma classe item-par
que aplicará o negrito no texto, desta forma:
.item-par {
font-weight: bold;
}
<ul>
<li class="item">1</li>
<li class="item item-par">2</li>
<li class="item">3</li>
<li class="item item-par">4</li>
<ul>
Isso tira a responsabilidade do html em sí, mas ainda é necessário adicionar a classe manualmente à todos os elementos pares.
Com a pseudo-classe :nth-child()
é possível resolver este problema sem adicionar classes a mais e nem mexer no html. Se declararmos :nth-child()
com o argumento 2n
, estaremos dizendo para o CSS alterar o estilo da classe somente nos elementos pares daquela classe
.item:nth-child(2n) {
font-weight: bold;
}
Assim, os valores 2 e 4 estarão em negrito, assim como qualquer outro valor na posição par.
Espero ter ajudado! Qualquer outra dúvida pode postar aqui. :)