Ya no tienes que indagar más por otros sitios ya que llegaste al lugar exacto, poseemos la solución que buscas y sin complicarte.
Solución:
Aclaración:
Debido a una redacción anterior en la pregunta original, algunos ciudadanos de SO han expresado su preocupación de que esta respuesta pueda ser engañosa. Tenga en cuenta que, en CSS3, los estilos no se pueden aplicar a un nodo padre basado en el número de hijos que tiene. Sin embargo, los estilos poder se aplicará a los nodos secundarios en función del número de hermanos ellos tienen.
Respuesta original:
Increíblemente, esto ahora es posible únicamente en 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%;
El truco consiste en seleccionar al primer hijo cuando también es el enésimo del último hijo. Esto efectivamente selecciona en función del número de hermanos.
El crédito por esta técnica es para André Luís (descubierto) y Lea Verou (refinado).
¿No te encanta CSS3?
Ejemplo de CodePen:
- https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR
Fuentes:
- 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)
No. Bueno, en realidad no. Hay un par de selectores que pueden acercarlo un poco, pero probablemente no funcionen en su ejemplo y no tengan la mejor compatibilidad de navegador.
:only-child
El :only-child es uno de los pocos true contando selectores en el sentido de que solo se aplica cuando hay un hijo del padre del elemento. Usando su ejemplo idealizado, actúa como children(1) probablemente lo haría.
:nth-child
El :nth-child El selector podría llevarlo a donde quiere ir dependiendo de lo que realmente esté buscando hacer. Si desea diseñar todos los elementos si hay 8 niños, no tiene suerte. Sin embargo, si desea aplicar estilos al octavo elemento y posteriores, intente esto:
p:nth-child( n + 8 )
/* add styles to make it pretty */
Desafortunadamente, estas probablemente no sean las soluciones que está buscando. Al final, probablemente necesitará usar algo de magia de Javascript para aplicar los estilos basados en el recuento; incluso si tuviera que usar uno de estos, necesitaría analizar detenidamente la compatibilidad del navegador antes de ir con un puro Solución CSS.
W3 CSS3 Spec sobre pseudoclases
EDITAR Leí tu pregunta de manera un poco diferente: hay un par de otras formas de diseñar el padre, no los niños. Déjame lanzar algunos otros selectores a tu manera:
:empty y :not
Estiliza elementos que no tienen hijos. No es tan útil por sí solo, pero cuando se combina con el :not selector, puede aplicar estilo solo a los elementos que tienen hijos:
div:not(:empty)
/* We know it has stuff in it! */
No puede contar cuántos niños están disponibles con CSS puro aquí, pero es otro selector interesante que le permite hacer cosas interesantes.
NOTA: Esta solución devolverá los elementos secundarios de conjuntos de ciertas longitudes, no el elemento principal como ha solicitado. Con suerte, seguirá siendo útil.
Andre Luis ideó un método: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Desafortunadamente, solo funciona en IE9 y superior.
Básicamente, combina: nth-child () con otras pseudoclases que se ocupan de la posición de un elemento. Este enfoque le permite especificar elementos de conjuntos de elementos con longitudes específicas.
Por ejemplo :nth-child(1):nth-last-child(3) coincide con el primer elemento de un conjunto y al mismo tiempo es el tercer elemento del final del conjunto. Esto hace dos cosas: garantiza que el conjunto solo tiene tres elementos y que tenemos el primero de los tres. Para especificar el segundo elemento del conjunto de tres elementos, usaríamos :nth-child(2):nth-last-child(2).
Ejemplo 1: seleccione todos los elementos de la lista si el conjunto tiene tres 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%;
Ejemplo 1 alternativa de Lea Verou:
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li
width: 33.3333%;
Ejemplo 2: apuntar al último elemento del conjunto con tres elementos de lista:
li:nth-child(3):last-child
/* I'm the last of three */
Ejemplo 2 alternativa:
li:nth-child(3):nth-last-child(1)
/* I'm the last of three */
Ejemplo 3: segmentar el segundo elemento del conjunto con cuatro elementos de lista:
li:nth-child(2):nth-last-child(3)
/* I'm the second of four */
Nos puedes añadir valor a nuestra información tributando tu experiencia en las interpretaciones.