Get last-child when child class

Question

Given the following DOM tree:

I need to add a box-shadow to the last .sticky class that is available as child on a .list class.

The following won't work:

  .list {

    .sticky:last-child { box-shadow: 0 6px 4px -4px #888888; }
  }

I'm a bit surprised I have some difficulty figuring this one out.

It's not clear, do you need to select the last `.sticky` for **every** `.list` or the last `.sticky` in the DOM? Also can you please write an example of your DOM structure instead of a screenshot. — Arkellys, Nov 08 '19 at 10:02
@Arkellys Not for every list, but the last sticky overall. In the screenshot you can see for example the last sticky on the second .list item. The 2 collapsed .list items may not have a sticky child element, which makes that the selector should select the last sticky element visible in the screenshot. I can't currently copy the code because I'm at work currently, and I don't have the project here. If there is no pure css solution, I can calculate it, of course. — html_programmer, Nov 08 '19 at 10:17
I think you're searching something like this: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector and you need some js to do so. — ReSedano, Nov 08 '19 at 10:20

Par Tha · Answer 1 · 2019-11-07T23:40:18.603

1

Try this

$(".sticky").last().css('box-shadow', '0 6px 4px -4px #888888');

edited Nov 07 '19 at 23:40

answered Nov 07 '19 at 23:09

Par Tha

1,265
7
10

No because this will select the last .list element. It may not be the last that has a sticky class as child. – html_programmer Nov 07 '19 at 23:14
I'm not using jQuery, hoped for a pure css solution. But if it's not possible I'll calculate it, thanks – html_programmer Nov 07 '19 at 23:41

score 0 · Answer 2 · answered Nov 07 '19 at 22:58

0

it should be

.list .sticky:last-child {
  box-shadow: 0 6px 4px -4px #888888;
}

answered Nov 07 '19 at 22:58

James

621
7
18

It's sass, that should be the same and it won't work, as all `.sticky` will be last-child. – html_programmer Nov 07 '19 at 23:01

PlanetGospel · Answer 3 · 2019-11-07T23:58:54.883

0

Try giving the parent div a class, like sticky container and then target the sticky within that. This should apply the styling to the last sticky child in the div.

Example

<div class="list">
 <div class="container">
    <div class="sticky">Sticky1</div>
    <div class="sticky">Sticky2</div>
    <div class="sticky">Sticky3</div>
  </div>
</div>

and then the css would be

.list {
  .container {
    .sticky:last-child { box-shadow: 0 6px 4px -4px #888888; }
  }
}

Solution using Javascript.
Not quite sure on the css side, but if using javascript you can look to style the last sticky in the parent div like so:

const listWrapper = document.getElementById('sticky-container')
const stickyList = listWrapper.getElementsByClassName('sticky')
const lastSticky = listWrapper.getElementsByClassName('sticky')[stickyList.length -1]
lastSticky.style.boxShadow = '0 6px 4px -4px #888888'

edited Nov 07 '19 at 23:58

answered Nov 07 '19 at 23:03

PlanetGospel

11
3

This is not what my DOM looks like. There is 1 sticky class per list, I need to identify the last sticky div that exists for a list. – html_programmer Nov 07 '19 at 23:05
If thats the case can you not do last child on list as opposed to sticky. – PlanetGospel Nov 07 '19 at 23:08
No because there is no last list - what I need to find is the last sticky element. There may be 10 lists, and if the 5th list contains the last sticky element, then this is what I need. – html_programmer Nov 07 '19 at 23:10

score 0 · Answer 4 · answered Nov 08 '19 at 07:56

As long as the .list and .sticky elements are always siblings, you could scope with a :last-of-type approach:

.list:last-of-type .sticky:last-of-type {
    box-shadow: 0 6px 4px -4px #888888;
}

So the effect would only apply to a single element:

The last .sticky that is a sibling of another .sticky inside the last .list that is a sibling of another .list.

Get last-child when child class

4 Answers4