css <a> - ¿Puede CSS detectar el número de hijos que tiene un elemento?




4 Answers

Aclaración:

Debido a una frase anterior en la pregunta original, algunos ciudadanos de SO han expresado su preocupación de que esta respuesta podría ser engañosa. Tenga en cuenta que, en CSS3, los estilos no se pueden aplicar a un nodo principal en función del número de elementos secundarios que tiene. Sin embargo, los estilos pueden aplicarse a los nodos hijos en función del número de hermanos que tengan.

Respuesta original:

Increíblemente, esto ahora es posible puramente 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 es seleccionar el primer hijo cuando también es el noveno último. Esto selecciona efectivamente 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:

Fuentes:

html style

Probablemente estoy respondiendo mi propia pregunta, pero soy extremadamente curioso.

Sé que CSS puede seleccionar hijos individuales de un padre, pero hay apoyo para estilizar a los hijos de un contenedor, si su padre tiene una cierta cantidad de hijos

por ejemplo

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

Sé que suena raro, pero mi gerente me pidió que lo comprobara, no he encontrado nada por mi cuenta, así que decidí recurrir a SO antes de finalizar la búsqueda.




NOTA: Esta solución devolverá los elementos secundarios de conjuntos de ciertas longitudes, no el elemento principal como ha pedido. Con suerte, sigue siendo útil.

A Andre Luis se le ocurrió un método: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Desafortunadamente, solo funciona en IE9 y superior.

Esencialmente, combinas: nth-child () con otras pseudo clases que tratan 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 también es el tercer elemento desde el 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: destino del ú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: destino del segundo elemento del conjunto con cuatro elementos de lista:

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



Sí, podemos hacer esto usando nth-child así

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

Esto hará que el 8º niño div en adelante se vuelva rojo. Espero que esto ayude...

Además, si alguien alguna vez dice "hey, no se puede hacer con un estilo usando css, use JS !!!" Dudalos inmediatamente. CSS es extremadamente flexible hoy en día

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

En el ejemplo, los primeros 7 niños son azules, luego 8 en adelante son rojos ...




No, no hay nada como esto en CSS. Sin embargo, puede usar JavaScript para calcular el número de hijos y aplicar estilos.




Related