O CSS pode detectar o número de filhos que um elemento possui?

Eu provavelmente estou respondendo a minha própria pergunta, mas estou extremamente curioso.

Eu sei que CSS pode selecionar filhos individuais de um pai, mas há suporte para estilizar os filhos de um contêiner, se o pai tiver uma certa quantidade de filhos.

por exemplo

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

Eu sei que soa estranho, mas meu gerente me pediu para verificar, não encontrei nada por conta própria, então eu decidi voltar para o SO antes de terminar a busca.

Esclarecimento:

Por causa de um fraseado anterior na pergunta original, alguns cidadãos da SO levantaram preocupações de que essa resposta poderia ser enganosa. Observe que, no CSS3, estilos não podem ser aplicados a um nó pai com base no número de filhos que ele possui. No entanto, os estilos podem ser aplicados aos nós filhos com base no número de irmãos que eles têm.


Resposta original:

Incrivelmente, isso agora é possível apenas em 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%; } 

O truque é selecionar o primeiro filho quando ele é também o filho n-da-última. Isso efetivamente seleciona com base no número de irmãos.

O crédito por essa técnica vai para André Luís (descoberto) e Lea Verou (refinado).

Você não ama apenas o CSS3? 😄

Exemplo CodePen:

Fontes:

Não. Bem, não realmente. Existem alguns seletores que podem aproximar você de alguma forma, mas provavelmente não funcionarão no seu exemplo e não terão a melhor compatibilidade de navegador.

:only-child

O :only-child único é um dos poucos verdadeiros seletores de contagem, no sentido de que só é aplicado quando há um filho do pai do elemento. Usando seu exemplo idealizado, ele age como children(1) provavelmente o faria.

:nth-child

O seletor :nth-child pode realmente levá-lo aonde você quer ir, dependendo do que você realmente quer fazer. Se você quiser estilo todos os elementos, se houver 8 filhos, você está sem sorte. Se, no entanto, você quiser aplicar estilos aos elementos 8 e posteriores, tente o seguinte:

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

Infelizmente, essas provavelmente não são as soluções que você está procurando. No final, você provavelmente precisará usar um pouco de magia de Javascript para aplicar os estilos com base na contagem – mesmo que você usasse um desses, você precisaria dar uma boa olhada na compatibilidade do navegador antes de ir com um puro Solução CSS.

W3 CSS3 Spec em pseudo-classs

EDIT eu li sua pergunta um pouco diferente – existem algumas outras maneiras de estilizar o pai , não as crianças. Deixe-me jogar alguns outros seletores do seu jeito:

:empty e :not

Este elementos de estilos que não têm filhos. Não é tão útil sozinho, mas quando emparelhado com o seletor :not , você pode estilizar apenas os elementos que têm filhos:

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

Você não pode contar quantos filhos estão disponíveis com CSS puro aqui, mas é outro seletor interessante que permite fazer coisas legais.

NOTA: Essa solução retornará os filhos de conjuntos de determinados comprimentos, não o elemento pai, como você pediu. Espero que ainda seja útil.

Andre Luis veio com um método: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Infelizmente, ele só funciona no IE9 e acima.

Essencialmente, você combina: nth-child () com outras pseudo classs que lidam com a posição de um elemento. Essa abordagem permite especificar elementos de conjuntos de elementos com comprimentos específicos .

Por exemplo :nth-child(1):nth-last-child(3) corresponde ao primeiro elemento em um conjunto, sendo também o terceiro elemento do final do conjunto. Isso faz duas coisas: garante que o conjunto tenha apenas três elementos e que tenhamos o primeiro dos três. Para especificar o segundo elemento do conjunto de três elementos, :nth-child(2):nth-last-child(2) .

Exemplo 1 – Selecione todos os elementos da lista se o conjunto tiver três elementos:

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

Exemplo 1 alternativa de Lea Verou:

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

Exemplo 2 – meta último elemento do conjunto com três elementos de lista:

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

Exemplo 2 alternativo:

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

Exemplo 3 – segmente o segundo elemento do conjunto com quatro elementos de lista:

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

Trabalhando com a solução de Matt, usei a seguinte implementação 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); } } 

Isso permite expandir rapidamente o número de itens.

sim, podemos fazer isso usando n-criança como assim

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

Isso fará com que o oitavo filho div se torne vermelho. Espero que isto ajude…

Além disso, se alguém disser “hey, eles não podem ser feitos com estilo usando css, use JS !!!” duvide-os imediatamente. CSS é extremamente flexível hoje em dia

Exemplo :: http://jsfiddle.net/uWrLE/1/

No exemplo, as primeiras 7 crianças são azuis, depois 8 são vermelhas …

Se você vai fazê-lo em CSS puro (usando scss), mas você tem diferentes elementos / classs dentro da mesma class pai, você pode usar esta versão!

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

Não, não há nada como isso no CSS. Você pode, no entanto, usar JavaScript para calcular o número de filhos e aplicar estilos.