target last element with specific class

Question

I have several divs generated by php which contain childs with the class .child (amongst others div with different classes).
Here is a simplified sample of what it looks like :

<div class="container">
  <div class="child"></div>
  <div class="other-class"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="other-class"></div>
</div>
<div class="container">
  <div class="other-class"></div>
  <div class="child"></div>
  <div class="other-class"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="other-class"></div>
</div>

I would like to target the last div with the class .child of every .container in my page in order to modify to its margins and a few other tweaks.

Since it is generated by php, I can't predict where the divs with the class .child will appear nor how many of them will be generated. It depends on the data in my sql database.

Also, a user can add a new div with the class .child at the bottom of .container through ajax, and in this case the css would no longer target the current last .child but the new one generated by the user.

I've tried several of things with css (last-child, last-of-type... etc) but I couldn't successfully target my divs.
This thread is a duplicate (I've consulted many others) but they are all 4+ years old and mostly bring jquery alternatives.
Is there anything new to actually do this with css ?

the duplicate link provides an alternative solution to target the first element which doesn't seem adaptable to my situation. — QiMath, Dec 29 '16 at 15:23

score 0 · Answer 1 · answered Dec 29 '16 at 14:58

0

Have you tried this?

.container .child:last-child

answered Dec 29 '16 at 14:58

Ivozor

976
8
23

hello, this is indeed the very first thing I tried. It wouldn't work however. – QiMath Dec 29 '16 at 14:58

score 0 · Answer 2 · answered Dec 29 '16 at 15:02

0

try to this:

.container > div:last-child { }

answered Dec 29 '16 at 15:02

Awadhesh verma

530
4
10

It won't work, since the last div doesn't necessarily have the class `.child` :( – QiMath Dec 29 '16 at 15:03

target last element with specific class

2 Answers2