4

Infelizmente a pergunta marcada como "possível duplicata" (e as suas respostas) abordam outra coisa, especificamente o funcionamento da variável n em fórmulas passadas no :nth-child(), o que não contempla e nem respondem às dúvidas expostas nesta pergunta.

Fiz algumas pesquisas e vi que a pseudo-classe :nth-child() não funciona quando usada com classes. Por exemplo:

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

O texto do primeiro elemento da classe .classe não fica vermelho, como se esperaria. Porém, se eu alterar o valor do .nth-child para (2), irá aplicar a cor vermelha ao primeiro elemento da classe (não ao segundo, como se esperaria):

.classe:nth-child(2){
   color: red;
}
<div>texto preto</div>
<div class="classe">este texto é vermelho, mas não deveria :/</div>
<div class="classe">este texto era pra ser vermelho :(</div>

Ora, se o .nth-child() não funciona com classes, por que quando eu altero o valor para (2) a propriedade é aplicada no elemento errado, e com o valor (1) nada acontece?

E quando eu removo a classe da segunda div, ao contrário do exemplo anterior, nada acontece:

.classe:nth-child(2){
   color: red;
}
<div>texto preto</div>
<div>texto preto</div>
<div class="classe">texto preto</div>

No exemplo acima, se eu alterar o valor de (1) para (3), irá alterar a cor da última div, a que tem a classe .classe. Mas, se eu remover a classe da div, nada acontecerá.

Ou seja, a classe está fazendo alguma influência, só não consegui entender que influência seria essa.

A dúvida é: o estilo .classe:nth-child() não deveria ser ignorado pelo CSS? Qual o critério que o CSS utiliza nesses casos, já que no segundo exemplo a cor foi alterada (mesmo sendo no elemento não desejado)?

9
  • 2
    Possível duplicata de O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?
    – Syzoth
    Commented 31/12/2018 às 20:37
  • o N explica especificamente o porque não funciona baseado por classes, entenderá a base dos elementos filhos/irmãos e que o comportamento do seletor é baseado nisto, a outra pergunta que complementaria a explicação é provavelmente essa pt.stackoverflow.com/q/290866/3635, aonde explico na resposta claramente, elementos irmãos diretos, ou seja independente de qualquer outra característica, a consideração é pelos diretos, então mesmo com o seletor de classe, o nth-CHILD vai avaliar todos filhos.
    – Syzoth
    Commented 31/12/2018 às 21:05
  • É basicamente o que o hugo respondeu um grupo de elementos irmãos, ou seja vai avaliar a todos irmãos na contagem no N-enisimo
    – Syzoth
    Commented 31/12/2018 às 21:07
  • 1
    @GuilhermeNascimento Antes de formular a pergunta eu li esses tópicos todos, mas pra mim elas ainda não conseguiram esclarecer as dúvidas que eu tinha. A resposta do HugoCSS foi bem específica e clara pra mim. Creio que poderá ajudar alguém leigo como eu no futuro. Valeu!
    – Sam
    Commented 31/12/2018 às 21:10
  • Não vejo complemento tão extra assim na resposta, ambos links que citei abordam completamente, aqui o erro cai mais para erro de digitação/uso, desculpe estou apenas sendo sincero sobre a abordagem técnica, se entende o funcionamento técnico entende o problema, independe ter ter exemplos ou não, a ideia é entender o CHILD da palavra, é claro que CSS é confuso a primeira vista, mas se o entendimento técnico é explorado ai sua percepção muda de angulo o que fará entender melhor o comportamento de DOM, box-model e outros seletores em geral ;)
    – Syzoth
    Commented 31/12/2018 às 21:15

2 Respostas 2

4

A regra CSS tem que ser válida para ser aplicada, ou seja, tem que haver as duas coisas para ser true, classe e filho.

E veja que o nth-child é para um grupo de elementos irmãos, não importa sem tem classe ou não. A classe fica apenas como um complemento a regra, pois como vc pode ver é possível selecional um elemento no grupo apenas com :nth-child(n) sem declarar classe o tipo de elemento.

A pseudo-classe CSS :nth-child() seleciona elementos com base em suas posições em um grupo de elementos irmãos.

Fonte na documentação da Mozilla: https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-child

Vamos ao exemplo.

Aqui temos um grupo de 5 irmão, todos eles são :nth-child(1)a(5), porém para o CSS ser aplicado ele tem que ser o :nth-child(X) e ter a classe .classe, então tem que estar com as duas condições true. Deixei os comentários no código

/* vai aplicar */
.classe :nth-child(1){
  color: green;
}
/* não vai aplicar, não tem a classe */
.classe:nth-child(1){
  color: red;
}
/* vai aplicar tem a classe e é o 2 irmão */
.classe:nth-child(2){
  color: red;
}
/* não vai aplicar, pois é o 4 filho, mas sem a classe */
.classe:nth-child(4){
  color: red;
}
/* vai aplicar */
.classe:nth-child(5){
  color: blue;
}
<div>

  <div class="">irmão 1 - este texto a regra falha</div>
  <div class="classe">irmão 2 -texto deve ser vermelho</div>
  <div class="classe">irmão 3
    <div>filho 1 selecionado apenas com ":nth-child(1)" sem classe ou elemento</div>
    <div>filho 2</div>
  </div>
  <div class="">irmão 4 - este texto a regra falha</div>
  <div class="classe">irmão 5 - este texto é azul :(</div>

</div>

11
  • Agora entendi a parada... achei que era meio complicado mas vejo que é bem simples. Ambas as condições devem atender ao seletor. :D
    – Sam
    Commented 31/12/2018 às 20:17
  • Estava prestes a formular tal resposta!
    – LipESprY
    Commented 31/12/2018 às 20:17
  • 1
    @Sam assumo que quando vi seus exemplos fiquei bem confuso também rss, mas ai fiquei olhando e o código ficou me olhando de volta, ai caiu a ficha! Mas foi um questionamento interessante da sua parte.
    – hugocsl
    Commented 31/12/2018 às 20:19
  • @LipESprY cheguei primeiro nessa :D
    – hugocsl
    Commented 31/12/2018 às 20:19
  • 1
    Pra vc ver que uma simples explicação clareia tudo, e o que parecia complicado se torna simples. Mas juro que fiquei meio bolado com isso, não estava conseguindo pegar a lógica. Valeu!
    – Sam
    Commented 31/12/2018 às 20:20
3

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

Ao utilizar tal seletor, você deve atentar-se principalmente ao elemento pai.

Difícil entender, mas é assim mesmo! Você cria o seletor e ele considera todos os elementos filhos de seu pai! (Bugou?!)

"- O texto do primeiro elemento da classe .classe não fica vermelho, como se esperaria. Porém, se eu alterar o valor do .nth-child para (2), irá aplicar a cor vermelha ao primeiro elemento da classe (não ao segundo, como se esperaria)." (sic)

Veja este exemplo (na pergunta):

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

  • <body> é o elemento pai;
  • <div>texto preto</div> é o elemento filho #1. Equivalente a :nth-child(1);
  • <div class="classe">este texto era pra ser vermelho :(</div> é o elemento filho #2. Equivalente a :nth-child(2);
  • <div class="classe">texto preto</div> é o elemento filho #3. Equivalente a :nth-child(3);

Acontece que para o seletor .classe:nth-child(1) funcionar no filho #1, ele não poderia ter mencionado a classe-alvo: .classe! Dessa forma, só vai "bindar" quando bater o número do elemento com a classe (Ahh, e não se esqueça do papai!).

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>

  • <body> é o elemento pai;

  • <div>texto preto</div> é o elemento filho #1;

  • <p class="classe">este texto era pra ser vermelho :(</p> é o elemento filho #2;

  • <span class="classe">texto preto</span> é o elemento filho #3;

  • <strong>texto preto</strong> é o elemento filho #4;

  • <i>texto preto</i> é o elemento filho #5;

Esta resposta é um complemento da resposta do hugocsl.

3
  • 2
    Boa explicação. ObG!
    – Sam
    Commented 31/12/2018 às 20:53
  • É isso ai mesmo. Te dou uma dica, coloque os exemplo que vc fez no Snippet, para podermos executar e ver o exemplo funcionando, isso ajuda muito a visualizar e "linkar" o output com o texto código.
    – hugocsl
    Commented 31/12/2018 às 21:57
  • 1
    @hugocsl sua dica é uma ordem! (Acho snippet desnecessário quando o objetivo não é rodar o código, mas sua opnião vale!)
    – LipESprY
    Commented 31/12/2018 às 22:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .