"nth-last-child(1)" not targeting last element

user_10663833 0
Viewed 1026

I am not fully understanding the behaviour of some css pseudo class selectors.

Looking at this simple html template:

 <body>

  <div>
   <p>One</p>
   <p>Two</p>
  </div>

  <div>
   <p>Three</p>
   <p>Four</p>
  </div>

  <div>
   <p>Five</p>
   <p>Six</p>
  </div>

  <div>
   <p>Seven</p>
   <p>Eight</p>
  </div>

 </body>

I do not understand why the following css would actually apply the style to the first div:

div:nth-child(1){
 color: red;
}

and the following css won't apply the style to the last div:

div:nth-last-child(1){
 color: red;
}

As far as I understand the nth-child selector will find the target, look for his parent and select the nth-child corresponding to the target.

Thanks for your help.

Andrea

pseudo-class css-selectors css html
2 Answers

The problem with div:nth-last-child(1) is that the last div is not the last child.

Some IDEs, such as jsFiddle, insert a script element in the document tree.

enter image description here

That script element is being targeted by :nth-last-child(1), which doesn't care about element type. It only looks at siblings.

You have to either:

  1. get rid of the script element

  2. use div:nth-last-child(2)

  3. use div:nth-last-of-type(1)

jsFiddle demo

user_35972760

It does select the last div. But the HTML structure you posted is not a ' real ' one.

Where you test i bet there are some other elements that are siblings to those divs. Like <script> <footer> etc. So there is no nth-last-child(1) with the tag div inside body

So this works.

div:nth-child(1) {
  color: red;
}

div:nth-last-child(1) {
  color: red;
}
 <section>
   <div>
     <p>One</p>
     <p>Two</p>
   </div>

   <div>
     <p>Three</p>
     <p>Four</p>
   </div>

   <div>
     <p>Five</p>
     <p>Six</p>
   </div>

   <div>
     <p>Seven</p>
     <p>Eight</p>
   </div>
 </section>

But if you have another element after the last div, it won't work because now the div is the second to last element, not the last.

div:nth-child(1) {
  color: red;
}
/* this doesn't work */
div:nth-last-child(1) {
  color: red;
}
/* this works */

div:nth-last-child(2) {
  color: red;
}
 <section>
   <div>
     <p>One</p>
     <p>Two</p>
   </div>

   <div>
     <p>Three</p>
     <p>Four</p>
   </div>

   <div>
     <p>Five</p>
     <p>Six</p>
   </div>

   <div>
     <p>Seven</p>
     <p>Eight</p>
   </div>
   <h1>
     Hello there
   </h1>
 </section>

user_64411240
Related