Комментарии 19
Я долго искал что-либо подобное, и не смог найти. Да и никто из верстальщиков и фронтэнд-разработчиков, кого я знаю, не слышал о таком решении — специально уточнял, чтобы не повторяться.
Возможно, дело в том, что то решение подавалось как узкоспециализированное. В данном же случае идет указание на целевой элемент с условием определенного количества детей, а не просто как решение для автоматического задания ширины для определенного количества элементов в списке.
Возможно, дело в том, что то решение подавалось как узкоспециализированное. В данном же случае идет указание на целевой элемент с условием определенного количества детей, а не просто как решение для автоматического задания ширины для определенного количества элементов в списке.
С помощью nth-child можно вообще разные вещи творить. Хотя в приведенной ссылке речь идет не о выравнивании элементов исходя из их числа
Так почему ты об этом решении до сих пор не рассказал?
Я так понимаю, что если у нас неизвестное заранее количество элементов, то метод не работает? Тогда какой в нём смысл?
Нет, это такое же обращение как и любой другой nth-child.
в примере с блоками мы используем логику:
-если количество блоков кратно трем то…
-если количество блоков не кратно трем и нечетное то…
Соответственно, мы можем обратиться к любому количеству элементов, которое удовлетворяет условию an+b(т.е. фиксированная база + кратность)
Пример с ~ более читаем, так как мы сразу видим, например:
:nth-last-child(3n):first-child(если элемент, кратный трем, если считать с конца, является первым, то есть количество элементов кратно трем), ~ :nth-child(3n — 1) (обратиться к каждому третьему элементу начиная с второго)
в примере с блоками мы используем логику:
-если количество блоков кратно трем то…
-если количество блоков не кратно трем и нечетное то…
Соответственно, мы можем обратиться к любому количеству элементов, которое удовлетворяет условию an+b(т.е. фиксированная база + кратность)
Пример с ~ более читаем, так как мы сразу видим, например:
:nth-last-child(3n):first-child(если элемент, кратный трем, если считать с конца, является первым, то есть количество элементов кратно трем), ~ :nth-child(3n — 1) (обратиться к каждому третьему элементу начиная с второго)
codepen.io/anon/pen/ebfGI — вот так у меня поломалось
эээ, оно работает
там 14 элементов, это не попадает под условие «кратно трем» и не попадает под условие «не кратно трем и нечетное».
Если хотите — я сделал другой пример, с ним тоже можно поиграться.
Три элемента в колонке, первая колонка состоит из 1, 2 или 3 элементов в зависимости от количества элементов в блоке
codepen.io/Jabher/pen/atkwe
там 14 элементов, это не попадает под условие «кратно трем» и не попадает под условие «не кратно трем и нечетное».
Если хотите — я сделал другой пример, с ним тоже можно поиграться.
Три элемента в колонке, первая колонка состоит из 1, 2 или 3 элементов в зависимости от количества элементов в блоке
codepen.io/Jabher/pen/atkwe
НЛО прилетело и опубликовало эту надпись здесь
Статья не про CSS, а скорее про SASS. Вы бы хотя б результат компиляции в 2000 строк выложили.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Хотите распределить элементы, привязавшись к их количеству, на одних стилях? Да запросто