1
resposta

Negrito

Por que não usar o no HTML para o negrito ao invés de usar uma pseudo-classe no CSS?

1 resposta

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. :)