Какой селектор нужно использовать, для определения количества имеющихся child классов?

Question

[symnoob]

Всем привет,

у меня имеются несколько ниже описанных дивов с класом "parent", в эти дивы вложены другие дивы с классом "child" и "menu":

<div class="parent">
    <div class="menu"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<div class="parent">
    <div class="menu"></div>
    <div class="child"></div>
</div>

как можно при помощи scss отследить где имеются минимум два дива с классом "child"?

ну например для того чтобы придать высоту, если 2 дива и больше то придать диву с классом "child":

.child{
height: 200px;
}

а если у родительского дива только один див с классом "child" тогда другая высота:

.child{
height: 400px;
}

а ещё было бы круче если было бы возможно что-то вроде этого, если у родительского дива боле одного дива с классом "child":

.child{
height: calc(400px / #количество дивов с классом "child");
}

Answer 1

[IIIu6ko]

Это невозможно сделать с помощью sass т.к. он не видит разметку.

Можно использовать обычный css и теги


Вот здесь можно почитать подробней https://habr.com/ru/post/252181/

Answer 2

[Арсений Матыцин]

Предполагаю, что селектор :has в комбинации с :nth-child() сможет такое осуществить. К сожалению логические операции на CSS все еще на уровне манящего горизонта.

Поэтому, так как в конечном счете вывод будет осуществляться тем или иным шаблонизатором — проще считать элементы на нем и задавать родителю класс-модификатор, через который уже и осуществлять стилизацию.

Comments

[symnoob]

на сколько я понял документацию nth-child не может селектировать по названиям классов...

а проблема в том что у родительского класса имеется и другой див с названием меню, хотя он всего лишь один и присутствует всегда...

через шаблонизатор это будет почти не возможно, так как шаблонизируется через разные сервисы