Crear Cantidad Estilos y diseños de CSS específicos

Feb 2, 2026

Cómo

[dieciséis]

En este tutorial, vamos a echar un vistazo a las formas de cambiar los estilos de los elementos de CSS, así como aparentemente, al estilo de sus padres, dependiendo de la cantidad de elementos. También veremos cómo cambiar el diseño de los elementos en función de su cantidad, para crear un más adaptable Diseño de sitio web Eso hace un mejor uso del espacio.

Trucos de CSS para revolucionar tus diseños web.

Por último, cubriremos el uso de mostradores CSS para mostrar el índice de un elemento dentro de un conjunto dentro de él, además de mostrar el recuento total dentro del padre. Todo esto se logrará solo con CSS puro, sin la necesidad de JavaScript o Frameworks, lo que llevará a un código simple y más eficiente.

Para construir un sitio sin la necesidad de un código infinito, necesitará un Creador de sitios web . Y sean las capacidades de su sitio, aseguren su Alojamiento web El servicio es apto para el propósito. Por algo diferente, consigue tu almacenamiento en la nube a la altura.

Selectores de elementos individuales

CSS3 solo tiene un solo par de selectores que pueden determinar la cantidad de elementos, a saber, el: solo para los selectores secundarios de tipo y solo de tipo. Dicho esto, realmente solo pueden determinar si un elemento está por su cuenta o tiene hermanos. El selector único: el selector de niños coincide con los elementos que son el único hijo de su padre, mientras que: solo los elementos de tipo de tipo son los únicos de su tipo.

Desafortunadamente, eso es hasta el momento en que los selectores individuales vayan, pero hay algunos otros selectores que pueden destacar elementos en función de su orden en un conjunto de elementos similares. Estos son: Nth-Child,: NTH de tipo, nth-Último-hijo y nth-Último de tipo, que normalmente se utilizan para atacar los elementos en función de su orden en un conjunto de elementos similares. El: los selectores de ultimo infantil y el ultimo de los últimos tipos se utilizan para determinar el orden de los elementos que cuentan hacia atrás desde el último elemento hasta el primero. La combinación de estos con otros selectores nos permite crear cadenas más complejas que se dirigen a elementos específicos en función de su cantidad.

Cadenas selectivas específicas de la cantidad

De los cuatro selectores mencionados anteriormente, el principal que utilizaremos en este tutorial es el ultimo de tipo. La diferencia entre este y el NTH-Último selector de niños es que este último incluye todos los hermanos de los elementos en el conjunto, mientras que el primero solo incluye elementos del mismo tipo HTML y, por lo tanto, es más selectivo. Para el resto de este tutorial, usaremos los selectores de tipo de tipo, sin embargo, las variantes de -Child son igualmente válidas.

El nth-Último de tipo se puede usar junto con los selectores más populares de primer año de tipo para crear una cadena que se dirige al primer elemento en un conjunto de una cantidad deseada. Por ejemplo, podemos usar: primer de tipo: nth-Último de tipo (3) a los elementos de destino que son el primero y el tercero desde el final de su tipo o, en otras palabras, el primero de un Conjunto de tres. Luego, podemos extender esto con el Combinador General de Hermanos ~ para seleccionar a todos los hermanos que siguen al primero de un conjunto de tres. Combinando estas dos cadenas selectivas, podemos crear un selector complejo que se dirige a elementos que son los primeros de tres y todos los elementos del mismo tipo que lo siguen, lo que lo sigue, por lo que se selecciona todos los elementos en un conjunto de tres.

 .box: First-of Tipo: nth-Último de tipo (3),
.box: First-of Tipo: nth-Último de tipo (3) ~ .Box

Esta cadena selectora no solo funciona para un número específico de elementos, sino que incluso puede modificarse para apuntar a un rango de cantidades.

Si queremos apuntar a los elementos en un conjunto con una cantidad más de o menor que un valor en particular M, podemos usar la cadena con las técnicas (N + M) y (-N + M), respectivamente. Por ejemplo, para apuntar a todos los elementos en un conjunto de dos o más elementos que podemos usar:

 .box: First-of Tipo: nth-Último de tipo (N + 2),
.box: First-of Tipo: nth-Último de tipo (N + 2) ~ .Box

De manera similar, podemos apuntar a todos los elementos en un conjunto de dos elementos o menos usando:

 .box: First-of Tipo: nth-Último de tipo (-N + 2),
.box: First-of Tipo: nth-Último de tipo (-n + 2) ~ .Box

Como puede ver, esta es una potente cadena de selección que nos permite lograr cosas muy interesantes y útiles sin la necesidad de JavaScript u otros marcos. Es especialmente útil cuando se trata de crear diseños adaptativos que cambian según la cantidad de elementos.

Diseños dinámicos, específicos de la cantidad.

Digamos que queremos mostrar un grupo de cajas que muestren los resultados de una búsqueda o una llamada de API en un diseño de cuadrícula de dos columnas. El problema radica en el hecho de que los resultados provienen de una fuente externa y no tenemos forma de conocer el número de resultados que se devolverán, por lo tanto, no sabemos cuántas cajas se crearán. Mientras la cuadrícula se ve genial para un número par de cajas, cuando se aplica a un número impar, la última caja se sienta solo en una fila y se ve ... bueno, un poco extraño.

Esto es especialmente problemático al usar los elementos de FlexBox con Flex-crecer aplicados a ellos, ya que hace que el último elemento se convierta en el espacio vacío en la fila, lo que respecta al ancho completo. Una forma de prevenir esto podría ser hacer que el primero de un número impar de cajas tome una fila completa aplicando un ancho de 100% a las primeras cajas que también son un número impar de cajas desde el final, usando: First-Child: nth-Último de tipo (impar). Esto proporciona un mejor diseño, ya que da el primero y, por lo tanto, el resultado más relevante o reciente, más importancia que el anterior.

Incluso podemos agregar un caso especial para cuando la cantidad es divisible por tres usando: primer hijo: nth-Último de tipo (3N) para transformar la cuadrícula en un diseño de tres columnas aplicando un ancho del 33% a la primera. Cajas en un conjunto con una cantidad divisible por tres y todas las cajas que lo siguen.

 .box {
  Ancho: 50%;
}

.box: Primer hijo: nth-Último de tipo (ODD) {
  Ancho: 100%;
}

.box: Primer hijo: nth-Último de tipo (3N),
.box: Primer hijo: nth-Último de tipo (3N) ~ .Box {
  Ancho: 33%;
}

Conclusión

Como hemos visto, los selectores CSS se pueden encadenar juntos en una variedad de formas interesantes para aplicar estilos y diseños adaptativos que cambian según la cantidad de elementos. Las cadenas selectivas también se pueden usar para aplicar estilos aparentemente a la madre de un conjunto de elementos de cierta cantidad, utilizando :: Antes o :: después de los pseudo-elementos que se posicionan para ocupar el tamaño completo del padre. Combinado con los contadores CSS, estos pseudoalementos se pueden usar para mostrar el número total de descendientes en un elemento principal, así como texto que cambia según la cantidad de descendientes.

Estas técnicas ofrecen una forma valiosa de crear estilos y diseños dinámicos, basados en cantidad que son útiles cuando se manejan un número desconocido de elementos, que a menudo es el caso cuando se trata de API.

Este artículo fue publicado originalmente en el número 308 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 308 aquí o Suscríbete aquí .

Artículos relacionados:

5 consejos para CSS super rápido
Crear un diseño sensible con la cuadrícula CSS
Entendiendo la propiedad de visualización de CSS

Crear Cantidad Estilos y diseños de CSS específicos

Selectores de elementos individuales

Cadenas selectivas específicas de la cantidad

Diseños dinámicos, específicos de la cantidad.

Conclusión

Cómo - Artículos más populares

Cómo estirar un lienzo y configurar pinturas al óleo

Cómo construir un blog con Jekyll

Cómo crear efectos líquidos con WebGL

Cómo crear un personaje de videojuegos en Zbrush

Comience con activos en el diseñador de afinidad

Cómo representar superficies transparentes realistas

Uso de herramientas de vectores: Enfoque de un diseñador web

Crea puestas de sol sensacionales en Photoshop

Categorías