Элемент стиля, основанный на количестве детей, которые есть у ребенка
Я знаю, что могу стилизовать элемент в CSS в зависимости от того, сколько у него дочерних элементов с помощью псевдокласса :has():
.wrapper:has(> :last-child:nth-child(3)) {
background-color: red;
}
Однако в моем случае HTML выглядит так:
<div class='list'>
<div class='wrapper'>
<span>Element1</span>
<span>Element2</span>
<span>Element3</span>
</div>
</div>
Я хочу стилизовать класс list в зависимости от количества элементов.
.wrapper:has(> :last-child:nth-child(3)) этот селектор, вероятно (сейчас я не могу проверить), не будет работать, возможно, вам придется переписать его как .wrapper:has(& > :last-child:nth-child(3)), хотя это может зависеть от используемого браузера и/или ОС.
Дает ли .list:has(.wrapper:first-child > :last-child:nth-child(3)){background-color: red;} то, что нужно? (т.е. всегда ли .wrapper является первым дочерним элементом? - если нет, удалите этого первого дочернего элемента).
Я снова открыл вопрос, на самом деле это не дубликат. Насколько я могу судить, ОП спрашивает о внуках, а не о детях.
@AHaworth Я считаю, что ваш комментарий является ответом, но ОП должен уточнить, о чем на самом деле спрашивают
@vals дубликат по-прежнему актуален, потому что структура селектора на 90% одинакова. Нам нужно только удалить >, чтобы рассмотреть вложенные дочерние элементы.
Ответы 1
Этот фрагмент окрашивает фон .list в зависимости от того, сколько дочерних элементов у .wrapper. Он добавил, что хочет, чтобы .wrapper был первым дочерним элементом .list, как это и есть в данном коде.
.list:has(.wrapper:first-child > :last-child:nth-child(3)) {
background-color: red;
}<div class='list'>
<div class='wrapper'>
<span>Element1</span>
<span>Element2</span>
<span>Element3</span>
</div>
</div>Примечание. Если требуется какая-либо старая оболочка внутри списка, удалите :first-child.
Привет, ребята, я только что понял, что последний ответ работает в Chrome, но не в Firefox !!!
Какая версия Фаерфокса? FF опоздал с реализацией :has, но теперь все должно быть в порядке.
На моем Firefox (124.0.2) в Windows10 все в порядке.
Вы правы... Я все еще использую Firefox 115.9 на своей старой машине.
.list:has(:last-child:nth-child(3)) также подойдет для его HTML-структуры.
Вы имеете в виду общее количество элементов, детей, внуков, правнуков… Есть ли какой-то предел глубины?