Может ли CSS определить количество детей, которые есть у элемента?

Ответ 1

Разъяснение:

Из-за предыдущей формулировки в первоначальном вопросе, несколько граждан СО выражали опасения, что этот ответ может ввести в заблуждение. Обратите внимание, что в CSS3 стили не могут применяться к родительскому node на основе количества дочерних элементов, которые у него есть. Тем не менее, стили могут быть применены к дочерним узлам на основе количества братьев и сестер, которые у них есть.

Оригинальный ответ:

Невероятно, теперь это возможно исключительно в 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%;
}

Фокус в том, чтобы выбрать первого ребенка, когда он также является n-м-последним ребенком. Это эффективно выбирает в зависимости от количества братьев и сестер.

Кредит за эту технику относится к Андре Луису (обнаруженному) и Ли Вероу (уточненному).

Разве вы не любите CSS3? 😄

Пример CodePen:

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

Источники:

• http://andr3.net/blog/post/142 (André Luís)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)

Ответ 2

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

:only-child

:only-child - один из немногих истинных счетных селекторов в том смысле, что он применяется только тогда, когда есть один дочерний элемент родительского элемента. Используя ваш идеализированный пример, он действует как children(1), вероятно, будет.

:nth-child

Селектор :nth-child может фактически получить вас туда, куда вы хотите пойти, в зависимости от того, что вы действительно хотите сделать. Если вы хотите стилизовать все элементы, если есть 8 детей, вам не повезло. Если, однако, вы хотите применить стили к восьмому и более позднему элементам, попробуйте следующее:

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

К сожалению, это, вероятно, не те решения, которые вы ищете. В конце концов, вам, вероятно, понадобится использовать некоторое мастерство JavaScript для применения стилей на основе подсчета - даже если вы использовали один из них, вам нужно будет внимательно изучить совместимость браузера, прежде чем идти с чистым CSS.

W3 CSS3 Spec для псевдоклассов

РЕДАКТИРОВАТЬ Я читаю ваш вопрос немного по-другому - есть еще несколько способов стиля родителя, а не детей. Позвольте мне бросить несколько других селекторов по-вашему:

:empty и :not

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

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

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

Ответ 3

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

Andre Luis разработал метод: 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 */
}

Ответ 4

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

Это позволяет быстро расширить количество элементов.

Ответ 5

да, мы можем сделать это, используя nth-child так

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

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

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

Пример:: http://jsfiddle.net/uWrLE/1/

В примере первые 7 детей синие, а затем 8 красных...

Ответ 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});
    }
  }

Ответ 7

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