может ли css определить количество дочерних элементов?

<p>я, наверное, отвечаю на свой вопрос, но мне очень любопытно.</p><p>я знаю, что css может выбирать отдельных потомков родителя, но есть ли поддержка стиля потомков контейнера, если у его родителя есть определенное количество потомков.</p><p>например</p><pre><code>container:children(8) .child { //style the children this way if there are 8 children } </code></pre><p>я знаю, это звучит странно, но мой менеджер попросил меня проверить это, не нашел ничего самостоятельно, поэтому я решил обратиться к so, прежде чем закончить поиск.</p>

<p><strong> разъяснение: </strong></p><p>из-за предыдущей фразы в исходном вопросе несколько so граждан выразили обеспокоенность тем, что этот ответ может вводить в заблуждение. обратите внимание, что в css3 стили нельзя применять к <em> родительскому узлу </em> в зависимости от количества дочерних узлов. однако стили <em> могут </em> применяться к дочерним узлам в зависимости от количества <em> родных элементов </em>, которые они имеют.</p><hr><p><strong> оригинальный ответ: </strong></p><p>невероятно, но теперь это возможно только в css3.</p><pre><code>/* 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%; } </code></pre><p><em> хитрость заключается в том, чтобы выбрать первого потомка, когда он также является последним потомком nth. это эффективно выбирает на основе количества братьев и сестер. </em></p><p>кредит на эту технику достается андре луису (открыт) и леа веру (изысканный).</p><p>разве вы не просто любите css3? ????</p><p>пример codepen:</p><ul> <li> <a href="http://codepen.io/mattlubner/pen/rwpydx">http://codepen.io/mattlubner/pen/rwpydx</a> </li> </ul><p>источники:</p><ul> <li> <a href="http://andr3.net/blog/post/142">http://andr3.net/blog/post/142</a> (андре луис)</li> <li> <a href="http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/">http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/</a> (леа веру)</li> </ul>

<p>примечание. это решение возвращает дочерние элементы наборов определенной длины, а не родительский элемент, как вы просили. надеюсь, это все еще полезно.</p><p>андре луис разработал метод: <a href="http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/">http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/</a> к сожалению, он работает только в ie9 и выше.</p><p>по сути, вы комбинируете: nth-child () с другими псевдоклассами, которые имеют дело с позицией элемента. этот подход позволяет указывать элементы из <em> наборов элементов определенной длины </em>.</p><p>например, <code>:nth-child(1):nth-last-child(3)</code> соответствует первому элементу набора, а также является 3-м элементом с конца набора. это делает две вещи: гарантирует, что набор имеет только три элемента и что у нас есть первый из трех. чтобы указать второй элемент из набора из трех элементов, мы использовали бы <code>:nth-child(2):nth-last-child(2)</code>.</p><p><br></p><p><strong> пример 1 - выбрать все элементы списка, если в наборе есть три элемента: </strong></p><pre><code>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%; } </code></pre><p><strong> пример 1 альтернативы </strong> от леа веру:</p><pre><code>li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } </code></pre><p><br></p><p><strong> пример 2 - целевой последний элемент множества с тремя элементами списка: </strong></p><pre><code>li:nth-child(3):last-child { /* i'm the last of three */ } </code></pre><p><strong> пример 2 альтернатива: </strong></p><pre><code>li:nth-child(3):nth-last-child(1) { /* i'm the last of three */ } </code></pre><p><br></p><p><strong> пример 3 - целевой второй элемент множества с четырьмя элементами списка: </strong></p><pre><code>li:nth-child(2):nth-last-child(3) { /* i'm the second of four */ } </code></pre>

<p>отрабатывая решение мэтта, я использовал следующую реализацию compass/scss.</p><pre><code>@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); } } </code></pre><p>это позволяет быстро увеличить количество предметов.</p>

<p>да, мы можем сделать это с помощью nth-child, как так</p><pre><code>div:nth-child(n + 8) { background: red; } </code></pre><p>это заставит восьмого ребенка div стать красным. надеюсь это поможет...</p><p>кроме того, если кто-то скажет: "эй, они не могут быть выполнены в стиле css, используйте js !!!" сомневайся в них немедленно. css чрезвычайно гибок в наше время</p><p>пример :: <a href="http://jsfiddle.net/uwrle/1/">http://jsfiddle.net/uwrle/1/</a> </p><p>в примере первые 7 детей - синие, затем 8 лет - красные ...</p>

<p>если вы собираетесь делать это в чистом css (используя scss), но у вас есть разные элементы/классы внутри одного родительского класса, вы можете использовать эту версию !!</p><pre><code> &: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}); } } </code></pre>