¿Puede CSS detectar el número de hijos que tiene un elemento?




3 Answers

No. Bueno, en realidad no. Hay un par de selectores que pueden acercarte un poco, pero probablemente no funcionarán 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 verdaderos 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 selector :nth-child podría llevarte a donde quieres ir dependiendo de lo que realmente quieras hacer. Si quieres estilizar todos los elementos si hay 8 niños, no tienes suerte. Sin embargo, si desea aplicar estilos a los elementos 8 y posteriores, 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 tenga que usar un poco de magia con Javascript para aplicar los estilos según el recuento, incluso si tuviera que usar uno de estos, tendría que analizar detenidamente la compatibilidad del navegador antes de utilizar un navegador. Solución CSS

W3 CSS3 Spec en pseudo-clases

EDITAR . Leí su pregunta de manera un poco diferente: hay un par de maneras de estilizar a los padres , no a los niños. Déjame lanzar algunos otros selectores a tu manera:

:empty y :not

Este estilo de elementos que no tienen hijos. No es tan útil por sí solo, pero cuando se combina con el selector :not , solo puede aplicar estilo a los elementos que tienen hijos:

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

No puedes contar cuántos niños están disponibles con CSS puro aquí, pero es otro selector interesante que te permite hacer cosas geniales.

css css-selectors

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.




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 ampliar rápidamente el número de elementos.




¡Si lo va a hacer en CSS puro (usando scss) pero tiene diferentes elementos / clases dentro de la misma clase principal, 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});
    }
  }



Related