Может ли CSS определить количество дочерних элементов?
Я, наверное, отвечаю на свой вопрос, но мне очень любопытно.
Я знаю, что CSS может выбирать отдельных потомков родителя, но есть ли поддержка стиля дочерних элементов контейнера, если у его родителя есть определенное количество потомков.
container:children(8) // style the parent this way if there are 8 children >Я знаю, это звучит странно, но мой менеджер попросил меня проверить это, не нашел ничего самостоятельно, поэтому я решил обратиться к SO, прежде чем закончить поиск.
Разъяснение:
Из-за предыдущей фразы в первоначальном вопросе несколько граждан SO выразили обеспокоенность тем, что этот ответ может вводить в заблуждение. Обратите внимание, что в 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%; >Хитрость заключается в том, чтобы выбрать первого ребенка, когда он также является последним дочерним элементом. Это эффективно выбирает в зависимости от количества братьев и сестер.
Кредит на эту технику достается Андре Луису (открыто) и Леа Веру (изысканно).
Разве вы не просто любите CSS3? 😄
Очень кстати. Я написал миксин SASS, который использует эту технику: codepen.io/anon/pen/pJeLdE?editors=110
@IanSteffy Я только что проверил это на Chrome 45.0.2454.85 (64-разрядная версия), и он отлично работает…?
Если это работает в Codepen, но не с моим проектом, то это, безусловно, моя вина. Виноват. Этот ответ правильный! Правильно говорю!
Было бы неплохо добавить, почему это работает, для людей, не привыкших к нескольким псевдо-селекторам (как я был до сих пор;). Здесь происходит следующее: выбирается дочерний элемент, являющийся одновременно дочерним элементом x из начала / вершины и дочерним элементом y из конца. И поэтому он выбирает что-то, только если есть ровно x + y детей.
Обратите внимание, что вместо :first-child:nth-last-child(1) вас также можно использовать :only-child .
Нет, не совсем. Есть пара селекторов, которые могут немного приблизить вас, но, вероятно, не сработают в вашем примере и не имеют лучшей совместимости с браузером.
:only-child
Это :only-child один из немногих селекторов с истинным счетом в том смысле, что он применяется только тогда, когда есть один дочерний элемент родительского элемента. Используя ваш идеализированный пример, он действует как, children(1) вероятно, будет.
:nth-child
:nth-child Селектор может реально получить , где вы хотите пойти в зависимости от того, что вы действительно хотите сделать. Если вы хотите стилизовать все элементы, если есть 8 детей, вам не повезло. Однако, если вы хотите применить стили к 8-му и более поздним элементам, попробуйте это:
p:nth-child( n + 8 ) /* add styles to make it pretty */ >К сожалению, это, вероятно, не те решения, которые вы ищете. В конце концов, вам, вероятно, потребуется использовать некоторые Javascript Wizardry для применения стилей, основанных на количестве — даже если бы вы использовали один из них, вам нужно было бы внимательно взглянуть на совместимость браузера, прежде чем переходить с чистого CSS решение.
РЕДАКТИРОВАТЬ Я читаю ваш вопрос немного по-другому — есть пара других способов стилизации родителей , а не детей. Позвольте мне добавить несколько других селекторов по-вашему:
:empty и :not
Это стили элементов, которые не имеют детей. Не очень полезно само по себе, но в сочетании с :not селектором вы можете стилизовать только те элементы, которые имеют дочерние элементы:
div:not(:empty) /* We know it has stuff in it! */ >Вы не можете сосчитать, сколько детей доступно с чистым CSS, но это еще один интересный селектор, который позволяет вам делать классные вещи.
Стоит отметить, что первоначальный вопрос был отредактирован, в результате чего первоначальное «Нет» немного вводило в заблуждение (просто так 😛)
ПРИМЕЧАНИЕ. Это решение возвращает дочерние элементы наборов определенной длины, а не родительский элемент, как вы просили. Надеюсь, это все еще полезно.
По сути, вы комбинируете: nth-child () с другими псевдоклассами, которые имеют дело с позицией элемента. Этот подход позволяет указывать элементы из наборов элементов с определенной длиной .
Например, :nth-child(1):nth-last-child(3) соответствует первый элемент в наборе, а также является третьим элементом от конца набора. Это делает две вещи: гарантирует, что набор имеет только три элемента и что у нас есть первый из трех. Чтобы указать второй элемент из набора из трех элементов, мы будем использовать :nth-child(2):nth-last-child(2) .
Пример 1. Выберите все элементы списка, если set имеет три элемента:
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 */ >Может ли CSS определить количество дочерних элементов?
Я, наверное, отвечаю на свой вопрос, но мне очень любопытно.
Я знаю, что CSS может выбирать отдельных потомков родителя, но есть ли поддержка стиля потомков контейнера, если у его родителя есть определенное количество потомков.
Я знаю, это звучит странно, но мой менеджер попросил меня проверить это, не нашел ничего самостоятельно, поэтому я решил обратиться к SO, прежде чем закончить поиск.
11 ответов
Разъяснение:
Из-за предыдущей фразы в первоначальном вопросе несколько граждан SO выразили обеспокоенность тем, что этот ответ может вводить в заблуждение. Обратите внимание, что в 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
Хитрость заключается в том, чтобы выбрать первого ребенка, когда он также является последним дочерним элементом. Это эффективно выбирает в зависимости от количества братьев и сестер.
Кредит на эту технику достается Андре Луису (открыт) и Леа Веру (изысканный).
Разве вы не просто любите CSS3?
Нет, не совсем. Есть пара селекторов, которые могут немного приблизить вас, но, вероятно, не будут работать в вашем примере и не будут иметь лучшей совместимости с браузерами.
:only-child
:only-child является одним из немногих селекторов с истинным счетом в том смысле, что он применяется только тогда, когда есть один дочерний элемент родительского элемента. Используя ваш идеализированный пример, он действует как children(1) вероятно, будет.
:nth-child
:nth-child Селектор может фактически привести вас туда, куда вы хотите пойти, в зависимости от того, что вы действительно хотите сделать. Если вы хотите стилизовать все элементы, если есть 8 детей, вам не повезло. Однако, если вы хотите применить стили к 8-му и более поздним элементам, попробуйте это:
К сожалению, это, вероятно, не те решения, которые вы ищете. В конце концов, вам, вероятно, понадобится использовать Javascript Wizardry для применения стилей, основанных на количестве — даже если бы вы использовали один из них, вам нужно будет тщательно изучить совместимость браузера, прежде чем переходить к CSS решение.
РЕДАКТИРОВАТЬ Я читаю ваш вопрос немного по-другому — есть пара других способов стилизации родителей, а не детей. Позвольте мне добавить несколько других селекторов по-вашему:
:empty а также :not
Это стили элементов, которые не имеют дочерних элементов. Не очень полезно само по себе, но в сочетании с :not Селектор, вы можете стилизовать только те элементы, которые имеют детей:
Вы не можете сосчитать, сколько детей доступно с чистым CSS, но это еще один интересный селектор, который позволяет вам делать классные вещи.