Реализация :not(:only-child) или альтернативы
Задача реализовать разные условия для блока, содержащего один или несколько элементов. К примеру разное поведение flex-блока с одной картинкой (растягивается на всю ширину) или несколькими (выстраиваются попарно). Идеальным вариантом было бы использование проверки вроде :not(:only-child).
Пробую так, но не срабатывает:
[class*=pic] img:not(:only-child) {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
...
[class*=pic] img:only-child {
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
В итоге одиночная картинка все равно подпадает под 50% (вероятно, из-за ошибки приоритетов).
До этого использовал рабочий, но более тяжеловесный способ: разные классы для одиночных и парных картинок. Но и у него было много подводных камней с унификацией общих стилей.
В чем проблема :not(:only-child) и есть ли альтернативные решения?
Ответы (1 шт):
Автор решения: Baddy
→ Ссылка
Вроде получилось через :only-of-type:
[class*=pic] img:not(:only-of-type) {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}