Skip to main content
Commonmark migration
Fonte Link

O seletor nth-child(n) corresponde a cada elemento que é o enésimo filho, independentemente do tipo, de seu pai.

 

Fonte: W3Schools - CSS :nth-child() Selector

O seletor nth-child(n) corresponde a cada elemento que é o enésimo filho, independentemente do tipo, de seu pai.

 

Fonte: W3Schools - CSS :nth-child() Selector

O seletor nth-child(n) corresponde a cada elemento que é o enésimo filho, independentemente do tipo, de seu pai.

Fonte: W3Schools - CSS :nth-child() Selector

add snippet
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36
<!DOCTYPE html>
<html>
    <head>
        <style>
            .classe:nth-child(1) {
               color: red;
            }
        </style>
    </head>
    <body>
        <div>texto preto</div>
        <div class="classe">este texto era pra ser vermelho :(</div>
        <div class="classe">texto preto</div>
    </body>
</html>

.classe:nth-child(1) {
   color: red;
}
<!DOCTYPE html>
<html>
    <body>
        <div>texto preto</div>
        <div class="classe">este texto era pra ser vermelho :(</div>
        <div class="classe">texto preto</div>
    </body>
</html>

Outra questão: se consideram os filhos do pai! Independente de qual for o tipo do filhoconsideram os filhos do pai, independente do tipo do filho! Veja:

<body>
    <div>texto preto</div>
    <p class="classe">este texto era pra ser vermelho :(</p>
    <span class="classe">texto preto</span>
    <strong>texto preto</strong>
    <i>texto preto</i>
</body>

<body>
    <div>texto preto</div>
    <p class="classe">este texto era pra ser vermelho :(</p>
    <span class="classe">texto preto</span>
    <strong>texto preto</strong>
    <i>texto preto</i>
</body>

<!DOCTYPE html>
<html>
    <head>
        <style>
            .classe:nth-child(1) {
               color: red;
            }
        </style>
    </head>
    <body>
        <div>texto preto</div>
        <div class="classe">este texto era pra ser vermelho :(</div>
        <div class="classe">texto preto</div>
    </body>
</html>

Outra questão: se consideram os filhos do pai! Independente de qual for o tipo do filho! Veja:

<body>
    <div>texto preto</div>
    <p class="classe">este texto era pra ser vermelho :(</p>
    <span class="classe">texto preto</span>
    <strong>texto preto</strong>
    <i>texto preto</i>
</body>

.classe:nth-child(1) {
   color: red;
}
<!DOCTYPE html>
<html>
    <body>
        <div>texto preto</div>
        <div class="classe">este texto era pra ser vermelho :(</div>
        <div class="classe">texto preto</div>
    </body>
</html>

Outra questão: se consideram os filhos do pai, independente do tipo do filho! Veja:

<body>
    <div>texto preto</div>
    <p class="classe">este texto era pra ser vermelho :(</p>
    <span class="classe">texto preto</span>
    <strong>texto preto</strong>
    <i>texto preto</i>
</body>

adicionou 57 caracteres ao conteúdo
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36

Esta resposta é um complemento da respostaresposta do hugocsl.

Esta resposta é um complemento da resposta do hugocsl.

Esta resposta é um complemento da resposta do hugocsl.

Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36
Carregando