Pseudo-class behavior: nth-child

Question

Pseudo-class behavior: nth-child

Navigation

#1 by (5 votes)
#2 by (4 votes)

5

Unfortunately the question marked as "possible duplicate" (and your answers) address something else, specifically the variable n in formulas passed in :nth-child() , which does not contemplate and do not answer the doubts exposed in this question.

I did some research and saw that the :nth-child() pseudo-class does not work when used with classes. For example:

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

The text of the first element of the .classe class does not turn red, as expected. However, if I change the value of .nth-child to (2) , it will apply the red color to the first element of the class (not the second, as expected):

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

Now, if .nth-child() does not work with classes, why when I change the value to (2) is the property applied to the wrong element, and with (1) nothing happens?

And when I remove the class from the second div , unlike the previous example, nothing happens:

.classe:nth-child(2){
   color: red;
}

<div>texto preto</div>
<div>texto preto</div>
<div class="classe">texto preto</div>

In the example above, if I change the value from (1) to (3) , it will change the color of the last div , which has the .classe class. But if I remove the class from div , nothing will happen.

That is, the class is making some influence, I just could not understand what influence that would be.

The question is: should not the .classe:nth-child() style be ignored by CSS? What is the CSS criterion used in these cases, since in the second example the color has been changed (even if it is in the unwanted element)?

css3 pseudo-classes

asked by anonymous 31.12.2018 / 20:31

2 answers

4

The nth-child(n) selector matches each element that is the nth child, regardless of the type, of its parent.

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

When using this selector, you should focus on the parent element .

Difficult to understand, but that's the way it is! You create the selector and it considers all the child elements of your parent ! (Bugou?!)

" - The text of the first element of class .classe does not turn red, as expected. However, if I change the value from .nth-child to (2) , it will apply the red color to the first element of the class (not the second, as expected). "(sic)

See this example (in question):

.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> is the parent element ;
<div>texto preto</div> is the child element # 1 . Equivalent to :nth-child(1) ;
<div class="classe">este texto era pra ser vermelho :(</div> is the child element # 2 . Equivalent to :nth-child(2) ;
<div class="classe">texto preto</div> is the child element # 3 . Equivalent to :nth-child(3) ;

It turns out that for the .classe:nth-child(1) selector to work on child # 1, it could not have mentioned the target class : .classe ! That way, you will only "bind" when you hit the element number with the class (Ahh, and do not forget Dad!).

Other issue : If consider the children of the parent, regardless of the child's type ! See:

<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> is the parent element ;
<div>texto preto</div> is the child element # 1 ;
<p class="classe">este texto era pra ser vermelho :(</p> is the child element # 2 ;
<span class="classe">texto preto</span> is the child element # 3 ;
<strong>texto preto</strong> is the child element # 4 ;
<i>texto preto</i> is the child element # 5 ;

This response is a response : //en.stackoverflow.com/users/97477/hugocsl "> hugocsl .

31.12.2018 / 21:50

How to make the jQuery toggle function in pure javascript? Darken screen by clicking the search bar

score 5 · Accepted Answer

The CSS rule has to be valid to be applied, that is, there must be two things to be true , class and child.

And see that nth-child is for a sibling element group , it does not matter whether it has a class or not. The class is only as a complement to the rule, because as you can see it is possible to selectively select an element in the group with only :nth-child(n) without declaring class the element type.

CSS pseudo-class :nth-child() selects elements based on their positions in a group of sibling elements.

Source in Mozilla documentation : link a>

Let's go to the example.

Here we have a group of 5 siblings, all of them are :nth-child (1) to (5), but for CSS to be applied it has to be :nth-child(X) and have class .classe , be with both conditions true . I left the comments in the code

/* 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>