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

Question

Я, вероятно, отвечаю на свой вопрос, но мне очень любопытно.

Я знаю, что CSS может выбирать отдельных дочерних элементов родительского элемента, но есть ли поддержка стиля дочерних элементов контейнера, если у его родительского элемента есть определенное количество дочерних элементов.

например

container:children(8) .child {
  //style the children this way if there are 8 children
}

Я знаю, это звучит странно, но мой менеджер попросил меня проверить это, не нашел ничего самостоятельно, поэтому я решил обратиться к SO, прежде чем закончить поиск.

Answer 1

Пояснение:

Из-за предыдущей фразы в первоначальном вопросе некоторые граждане 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%;
}

Хитрость заключается в том, чтобы выбрать первого ребенка, когда он также является последним ребенком nth от последнего. Это эффективно выбирает в зависимости от количества братьев и сестер.

Благодарность за эту технику принадлежит Андре Луису (обнаружен) и Леа Веру (уточнено).

Разве вы не просто любите CSS3? ?

CodePen Пример:

• http://codepen.io/mattlubner/pen/RWPYdx

Источники:

• http://andr3.net/blog/post/142 (Андре Луис)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Леа Веру)

Answer 2

Нет.Ну не совсем.Есть пара селекторов, которые могут немного приблизить вас, но, вероятно, не сработают в вашем примере и не обеспечивают наилучшую совместимость с браузерами.

: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.

W3 CSS3 Спецификация для псевдоклассов

EDIT Я прочитал ваш вопрос немного по-другому - есть еще пара способовстиль родитель , а не дети.Позвольте мне добавить несколько других селекторов по-вашему:

:empty и :not

Это элементы стиля, которые не имеют дочерних элементов.Сам по себе он не очень полезен, но в сочетании с селектором :not вы можете стилизовать только те элементы, у которых есть дочерние элементы:

div:not(:empty) {
    /* We know it has stuff in it! */
}

Здесь вы не можете сосчитать, сколько дочерних элементов доступно с чистым CSS., но это еще один интересный селектор, который позволяет вам делать классные вещи.

Answer 3

ПРИМЕЧАНИЕ. Это решение вернет дочерние элементы наборов определенной длины, а не родительский элемент, как вы просили.Надеюсь, это все еще полезно.

Андре Луис изобрел метод: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ К сожалению, он работает только в IE9 и выше.

По сути, вы объединяете: nth-child() с другими псевдоклассами, которые имеют дело с позицией элемента.Этот подход позволяет указывать элементы из наборов элементов с определенной длиной .

Например, :nth-child(1):nth-last-child(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 */
}

Answer 4

Отрабатывая решение Мэтта, я использовал следующую реализацию 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);
    }
  }

Это позволяет быстро увеличить количество предметов.

Answer 5

да, мы можем сделать это, используя nth-child следующим образом:

div:nth-child(n + 8) {
    background: red;
}

Это сделает восьмой дочерний элемент потом красным.Надеюсь, это поможет ...

Кроме того, если кто-то когда-нибудь скажет: "эй, они не могут быть выполнены в стиле css, используйте JS !!!"Сомневайся в них немедленно.CSS в настоящее время чрезвычайно гибок

Answer 6

Если вы собираетесь делать это в чистом 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});
    }
  }

Answer 7

Нет, в CSS ничего подобного нет.Однако вы можете использовать JavaScript для вычисления количества детей и применения стилей.