2

I have a div, which contains 3 child divs.

I have a selector .parent-div .child-div:nth-child(1) which selects the first child div.

And .parent-div .child-div:nth-child(3) selects the last child div.

But, .parent-div .child-div:last-child selects nothing.

Any clues on what could be the issue? Does it have anything to do with float or absolute positioning?

Incidentally, I made the divs sortable using JQuery UI, which might have added some additional classes.

Edit: The .parent-div has 3 .childA-div's and one .child-clear div. So, the last .childA-div is not considered as a last-child because the real last child is of a different class.

I used nth-last-child(2) as suggested below.

Teddy
  • 4,009
  • 2
  • 33
  • 55
  • Possible duplicate of [CSS last-child selector: select last-element of specific class, not last child inside of parent?](http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i) – FelipeAls Dec 19 '16 at 13:07
  • Do you need that `.child-clear` element? If it's legacy code, probably yes but you can use `:after` pesudo or the (micro-)[clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) (IE8+ and IE6+ with zoom: 1 but who cares about IE6-7 nowadays) – FelipeAls Dec 19 '16 at 13:10
  • @FelipeAls I didn't realize that that was the problem earlier. As for the clear fix, I'll ook into the other options. Thanks! – Teddy Dec 19 '16 at 13:31

1 Answers1

2

use .child-div:nth-last-child(1) { }

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
  • Thanks. That worked. I used nth-last-child(2). It happens that there is another child div, which is not of class .child-div. It is a float clear div. – Teddy Dec 19 '16 at 10:35