Получить последний ребенок, когда дочерний класс

Question

Учитывая следующее дерево DOM:

Мне нужно добавить тень блока к последнему классу .sticky, который доступен как дочернийв классе .list.

Следующее не сработает:

  .list {

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

Я немного удивлен, у меня есть некоторые трудности с выяснением этого.

Answer 1

Попробуйте это

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

Answer 2

Если я правильно понял вашу проблему, я не думаю, что вы можете сделать это только с помощью CSS. Альтернативой является использование JS. Вот пример с классом, добавляемым динамически к последнему элементу .sticky:

const stickies = document.querySelectorAll('.list .sticky');

if(stickies.length > 0) {
  // Add whatever you want on the last sticky element
  stickies[stickies.length - 1].classList.add('last');
}

.list {
  width: 500px;
  padding: 5px;
  border: 1px dashed black;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.sticky {
  padding: 10px;
  margin: 5px;
  border: 1px dashed red;
}

.sticky.last{
  background: rgba(255, 0, 0, 0.1);
}

<div class="list">
  <div class="sticky"></div>
</div>

<div class="list">
  <div class="sticky"></div>
  <div class="sticky"></div>
</div>

<div class="list">
</div>

Answer 3

Поскольку элементы .list и .sticky всегда являются братьями и сестрами, вы можете использовать подход :last-of-type:

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

Таким образом, эффект будет применяться только к одному элементу:

Последний .sticky, который является родным братом другого .sticky внутри последнего .list, который является родным братом другого .list.

Answer 4

Попробуйте дать родителю div класс, например, закрепленный контейнер, а затем нацельтесь на закрепленный внутри него. Это должно применить стиль к последнему дочернему элементу в div.

Пример

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

, и тогда css будет

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

Решение с использованием Javascript.
Не совсем уверен, что со стороны CSS, но если вы используете javascript, вы можете посмотреть, как стилизовать последний стик в родительском div, например:

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'

Answer 5

должно быть

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