@lexstile

Как применить стили ко всем потомкам с заданным классом кроме последнего?

Нужно применить стили через класс ко всем элементам с классом .block кроме последнего.
Элементы .test1, .test2 должны иметь стили, test3 - должен игнорировать стили.
Т. е. нужно что-то подобное - :last-of-type, но для класса (как я понял, этот псевдокласс для тега).
<div class="wrap">
	<div class="test1 block">Тест 1</div>
	<div class="test2 block">Тест 2</div>
	<div class="test3 block">Тест 3</div>
	<div class="test4">Тест 4</div>
	<div class="test5">Тест 5</div>
</div>

Нужно сделать так (это не работает):
.block {
    margin-top: 0;

    &:not(:last-of-type) {
      margin-bottom: 40px;
    }
  }

Или так:
.block {
    margin-top: 0;
    margin-bottom: 40px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }


UPD: Работать должно также, но нужно не привязываться к числу, так как блоков неизвестное количество.
  • Вопрос задан
  • 423 просмотра
Пригласить эксперта
Ответы на вопрос 2
EdMSL
@EdMSL
Free Developer
Да, так просто не сделать. Но если нужно убрать только отступ, то можно схитрить так:
.block {
  margin-bottom: 40px;
}

div[class~="block"] + div:not([class~="block"])  {
  margin-top: -40px;
}

https://codepen.io/EdMSL/pen/LYyoepW
Ответ написан
artzolin
@artzolin
php, WordPress разработка сайтов artzolin.ru
.block {
	margin-top: 0;
	&:not(:last-child) {
		margin-bottom: 40px;
	}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы