Czy CSS może wykryć liczbę dzieci elementu?

Nie. Nie bardzo. Istnieje kilka selektorów, które mogą Cię nieco zbliżyć, ale prawdopodobnie nie będą działać w twoim przykładzie i nie mają najlepszej zgodności z przeglądarką.

:only-child

:only-child jest jednym z niewielu prawdziwych selektorów liczenia w tym sensie, że jest stosowany tylko wtedy, gdy istnieje jedno dziecko rodzica elementu. Używając wyidealizowanego przykładu, to działa jak children(1) prawdopodobnie.

:nth-child

Selektor :nth-child może rzeczywiście doprowadzić cię tam, gdzie chcesz iść w zależności od tego, co naprawdę chcesz zrobić. Jeśli chcesz wystylizować wszystkie elementy, jeśli jest 8 dzieci, masz pecha. Jeśli jednak chcesz zastosować style do 8. i późniejszych elementów, spróbuj tego:

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

Niestety, prawdopodobnie nie są to rozwiązania, których szukasz. W końcu prawdopodobnie będziesz musiał użyć jakiegoś kreatora Javascript, aby zastosować style na podstawie liczby-nawet jeśli chcesz użyć jednego z nich, musisz się dokładnie przyjrzeć zgodność przeglądarki przed przystąpieniem do czystego rozwiązania CSS.

W3 CSS3 Spec na pseudoklasach

EDIT czytam twoje pytanie trochę inaczej - jest kilka innych sposobów stylizacji rodzica , a nie Dzieci. Pozwolę sobie wrzucić kilka innych selektorów po swojemu:

:empty i :not

To stylizuje elementy, które nie mają dzieci. Sam w sobie nie jest zbyt przydatny, ale po sparowaniu z selektorem :not można stylizować tylko elementy, które mają dzieci:

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

Nie możesz policzyć, ile dzieci jest dostępnych z czystym CSS tutaj, ale jest to kolejny ciekawy selektor, który pozwala robić fajne rzeczy.

UWAGA: To rozwiązanie zwróci dzieci zestawów o określonych długościach, a nie Element nadrzędny, o który prosiłeś. Mam nadzieję, że nadal się przyda.

Zasadniczo, łączysz :NTH-child() z innymi pseudo klasami, które zajmują się pozycją elementu. Takie podejście pozwala na określenie elementów z zestawów elementów o określonych długościach.

Na przykład :nth-child(1):nth-last-child(3) dopasowuje pierwszy element w zbiorze, będąc jednocześnie trzecim elementem od końca zbioru. Robi to dwie rzeczy: gwarantuje, że zestaw ma tylko trzy elementy i że mamy pierwszy z trzech. Aby określić drugi element zestawu trzech elementów, użyjemy :nth-child(2):nth-last-child(2).

Przykład 1-Zaznacz wszystkie elementy listy, jeśli zestaw ma trzy elementy:

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%;
}

Przykład 1 alternatywa Z Lea Verou:

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

Przykład 2-docelowy ostatni element zestawu z trzema elementami listy:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

Przykład 2 alternatywa:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

Przykład 3-cel drugi element zbioru z czterema elementami listy:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

Pracując nad rozwiązaniem Matta, użyłem następującej implementacji 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);
    }
  }

Pozwala to szybko rozszerzyć liczbę elementów.

Tak możemy to zrobić używając NTH-child w ten sposób

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

To sprawi, że ósme dziecko div będzie czerwone. Mam nadzieję, że to pomoże...

Ponadto, jeśli ktoś kiedyś powie " hej, nie można zrobić ze stylami za pomocą css, użyj JS!!!"zwątpcie w nie natychmiast. CSS jest obecnie niezwykle elastyczny

Przykład:: http://jsfiddle.net/uWrLE/1/

W przykładzie pierwsze 7 dzieci jest niebieskich, następnie 8 jest czerwonych...

Jeśli zamierzasz to zrobić w czystym CSS (używając scss), ale masz różne elementy / klasy wewnątrz tej samej klasy nadrzędnej, możesz użyć tej wersji!!

  &: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});
    }
  }

Nie, Nie ma czegoś takiego w CSS. Możesz jednak użyć JavaScript, aby obliczyć liczbę dzieci i zastosować style.