¿Puede CSS detectar la cantidad de hijos que tiene un elemento?



Answers

No. Bueno, en realidad no. Hay un par de selectores que pueden acercarte un poco, pero probablemente no funcionen en tu ejemplo y no tengan la mejor compatibilidad con el navegador.

:only-child

El :only-child es uno de los pocos selectores de conteo verdadero en el sentido de que solo se aplica cuando hay un elemento secundario del elemento primario. Usando tu ejemplo idealizado, actúa como los children(1) probablemente lo harían.

:nth-child

El selector :nth-child en realidad puede llevarlo a donde quiere ir dependiendo de lo que realmente desea hacer. Si quieres peinar todos los elementos si hay 8 niños, no tienes suerte. Sin embargo, si desea aplicar estilos al 8º y posteriores elementos, intente esto:

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

Desafortunadamente, estas probablemente no son las soluciones que estás buscando. Al final, es probable que necesite utilizar alguna magia de Javascript para aplicar los estilos en función del recuento, incluso si tuviera que usar uno de estos, necesitaría examinar detenidamente la compatibilidad del navegador antes de utilizar un sistema puro. Solución CSS

W3 CSS3 Spec en pseudo-clases

EDITAR Leí su pregunta de forma un poco diferente: hay otras dos maneras de darle estilo al padre , no a los niños. Déjame lanzar algunos otros selectores a tu manera:

:empty y :not

Este estilos elementos que no tienen hijos. No es tan útil por sí solo, pero cuando se combina con el selector :not , solo puede diseñar los elementos que tienen hijos:

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

No puede contar cuántos hijos hay disponibles con CSS puro aquí, pero es otro selector interesante que le permite hacer cosas geniales.

Question

Probablemente responda mi propia pregunta, pero soy extremadamente curioso.

Sé que CSS puede seleccionar hijos individuales de un padre, pero ¿hay compatibilidad para darles estilo a los hijos de un contenedor, si el 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 revisara, no había encontrado nada por mi cuenta, así que decidí recurrir a SO antes de finalizar la búsqueda.




Si va a hacerlo en CSS puro (usando scss) pero tiene diferentes elementos / clases dentro de la misma clase para padres, puede usar esta versión.

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



Trabajando con la solución de Matt, utilicé la siguiente implementación de 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);
    }
  }

Esto le permite expandir rápidamente la cantidad de elementos.




Related