1

Как правильно добавить свойство к ребёнку блока через ::before для :last-child элемента с определённым именем класса?

Пример кода тут:

<div class="cv-viewer">
  <div class="v-panel v-has-height"></div>
  <div class="v-panel v-has-height"></div>
  <div class="v-panel hidden"></div>
  <div class="v-panel hidden"></div>
</div>

.cv-viewer {
.v-panel {
    width: 300px;
    height: 200px;
    background-color: #000;
    margin-bottom: 4px;
    position: relative;
}
.hidden{
    display: none;
}
& > .v-panel.v-has-height {
    &::before {
        content: '';
        position: absolute;
        left: 49px;
        top: -32px;
        width: 2px;
        height: 100%;
        background-color: #AD8CED;
        z-index: 0;
    }
}
& > .v-panel.v-has-height :last-child {
    &::before {
        content: '';
        position: absolute;
        left: 49px;
        top: -32px;
        width: 2px;
        height: 58px;
        background-color: #AD8CED;
        z-index: 0;
    }
  }
}

Т. к. разметка динамическая, кол-во детей меняется, нужно чтоб у последнего элемента с классом v-has-height псевдоэлемент ::before был ограниченной высоты.

3

1 ответ 1

1

То, что вам необходимо, на чистом CSS реализовать не получится. :last-child обращается к самому последнему элементу родителя, :last-of-type обращается к последнему элементу определенного типа или, иначе говоря, тега. Так что, либо вам потребуется обертка над элементами <div class="v-panel v-has-height"></div> и тогда вы сможете обратиться к последнему элементу при помощи :last-child, либо вам потребуется JS:

let blocks = Array.from(document.querySelectorAll('.v-has-height'));

blocks[blocks.length - 1].classList.add('v-has-height--last');
.v-panel {
  height: 50px;
  border: 1px solid;
  margin-bottom: 5px;
  padding-left: 40px;
  position: relative;
}

.v-panel:before  {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  left: 0;
  background-color: black;
}

.v-has-height:before {
  background-color: yellow;
}

.v-has-height.v-has-height--last:before {
  background-color: red;
}
<div class="cv-viewer">
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет желтый квадрат</div>
  <div class="v-panel v-has-height">Тут будет красный квадрат</div>
  <div class="v-panel hidden">Тут будет черный квадрат</div>
  <div class="v-panel hidden">Тут будет черный квадрат</div>
</div>

1
  • Спасибо) я так и понял что одним css тут не обойтись 19 апр 2017 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.