Может ли CSS определить количество детей у элемента?
Я, вероятно, отвечаю на свой собственный вопрос, но мне очень любопытно.
Я знаю, что CSS может выбирать отдельные дочерние элементы родителя, но есть ли поддержка стиля дочерних элементов контейнера, если у его родителя есть определенное количество детей.
container:children(8) .child {
//style the children this way if there are 8 children
}
Я знаю, что это звучит странно, но мой менеджер попросил меня проверить это, не нашел ничего самостоятельно, поэтому я решил обратиться к SO, прежде чем закончить поиск.
7 ответов
пояснение:
из-за предыдущей формулировки в исходном вопросе некоторые граждане высказали опасения, что этот ответ может ввести в заблуждение. Обратите внимание, что в CSS3 стили не могут быть применены к родительский узел исходя из количества детей. Однако, стили можете применяется к дочерним узлам на основе числа братья и сестры у них нет.
Оригинал ответ:
невероятно, теперь это возможно только в CSS3.
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
трюк состоит в том, чтобы выбрать первого ребенка, когда он также является nth-от-последнего ребенка. Это эффективно выбирает на основе количества братьев и сестер.
кредит для этой техники идет Андре Луис (обнаружен) и Леа веру (уточнен).
разве вы просто не любите CSS3?
сайт CodePen Пример:
источники:
нет. Ну, не совсем. Есть несколько селекторов, которые могут приблизить вас, но, вероятно, не будут работать в вашем примере и не имеют лучшей совместимости с браузером.
:only-child
на :only-child
является одним из немногих истинных селекторов подсчета в том смысле, что он применяется только тогда, когда есть один дочерний элемент родительского элемента. Используя ваш идеализированный пример, он действует как children(1)
вероятно.
:nth-child
в :nth-child
селектор может фактически привести вас туда, куда вы хотите пойти, в зависимости от того, что вы действительно хотите сделать. Если вы хотите, чтобы стиль всех элементов, если есть 8 детей, вам не повезло. Если, однако, вы хотите применить стили к 8-му и более поздним элементам, попробуйте следующее:
p:nth-child( n + 8 ){
/* add styles to make it pretty */
}
к сожалению, это, вероятно, не те решения, которые вы ищете. В конце концов, вам, вероятно, придется использовать некоторое волшебство Javascript для применения стилей, основанных на подсчете-даже если вы используйте один из них, вы должны иметь жесткий взгляд на совместимость браузера, прежде чем идти с чистым решением CSS.
редактировать я прочитал Ваш вопрос немного по-другому - есть несколько других способов стиля родитель, а не дети. Позвольте мне бросить несколько других селекторов в вашу сторону:
:empty
и :not
это элементы стилей, которые не имеют дети. Не то чтобы полезно само по себе, но в паре с :not
селектор, вы можете стиль только элементы, которые имеют детей:
div:not(:empty) {
/* We know it has stuff in it! */
}
вы не можете подсчитать, сколько детей доступно с чистым CSS здесь, но это еще один интересный селектор, который позволяет вам делать классные вещи.
Примечание: это решение вернет потомков наборов определенной длины, а не родительский элемент, как вы просили. Надеюсь, он еще пригодится.
Андре Луис придумал метод:http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ К сожалению, он работает только в IE9 и выше.
по существу, вы объединяете: nth-child () с другими псевдоклассами, которые имеют дело с положением элемента. Такой подход позволяет чтобы указать элементы из наборы элементов с определенными длинами.
например :nth-child(1):nth-last-child(3)
соответствует первому элементу в наборе, а также является 3-м элементом с конца набора. Это делает две вещи: гарантирует, что набор имеет только три элемента и что у нас есть первый из трех. Чтобы указать второй элемент из набора трех элементов, мы будем использовать :nth-child(2):nth-last-child(2)
.
Пример 1 - Выберите все элементы списка, если установить имеет три элемента:
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}
Пример 1 альтернатива от Lea Verou:
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
Пример 2-целевой последний элемент набора с тремя элементами списка:
li:nth-child(3):last-child {
/* I'm the last of three */
}
Пример 2 вариант:
li:nth-child(3):nth-last-child(1) {
/* I'm the last of three */
}
Пример 3-целевой второй элемент набора с четырьмя элементами списка:
li:nth-child(2):nth-last-child(3) {
/* I'm the second of four */
}
работая с решением Мэтта, я использовал следующую реализацию Compass/SCSS.
@for $i from 1 through 20 {
li:first-child:nth-last-child( #{$i} ),
li:first-child:nth-last-child( #{$i} ) ~ li {
width: calc(100% / #{$i} - 10px);
}
}
Это позволяет быстро расширить количество предметов.
да, мы можем сделать это, используя nth-child, как so
div:nth-child(n + 8) {
background: red;
}
Это заставит 8-го ребенка div вперед стать красным. Надеюсь, это поможет...
кроме того, если кто-то когда-либо говорит: "Эй, они не могут быть сделаны со стилем с помощью css, используйте JS!!!- немедленно усомнитесь в них. CSS в настоящее время чрезвычайно гибкий
пример::http://jsfiddle.net/uWrLE/1/
в примере первые 7 детей синие, затем 8 и далее красные...
Если вы собираетесь сделать это в чистом CSS (используя scss), но у вас есть разные элементы/классы внутри одного родительского класса, вы можете использовать эту версию!!
&:first-of-type:nth-last-of-type(1) {
max-width: 100%;
}
@for $i from 2 through 10 {
&:first-of-type:nth-last-of-type(#{$i}),
&:first-of-type:nth-last-of-type(#{$i}) ~ & {
max-width: (100% / #{$i});
}
}
нет, в CSS нет ничего подобного. Однако вы можете использовать JavaScript для вычисления количества детей и применения стилей.