- Teoría
- Teoría
Márgenes y :nth-child
Cambiamos el valor de justify-content y separamos las tarjetas con márgenes. Pero ahora solo caben dos tarjetas por fila en lugar de tres. La tercera no encontró espacio.
Veamos por qué. Añadimos un margen derecho a todas las tarjetas, incluida la tercera. Como no había espacio para ese margen en el contenedor, la tercera tarjeta pasó a la fila siguiente.
Para devolver la tercera tarjeta a su sitio, tenemos que quitarle el margen derecho. Podemos usar una pseudoclase.
Una pseudoclase se añade a un selector para hacerlo más preciso. Se escribe después del selector, precedida por dos puntos. Ya vimos las pseudoclases al aprender a seleccionar elementos con CSS.
Necesitamos quitar el margen derecho de cada tercera tarjeta. Para ello sirve la pseudoclase :nth-child, que selecciona elementos hijos según su posición:
/* Selecciona el segundo hijo si tiene la clase item */
.item:nth-child(2) { ... }
/* Selecciona los hijos de posición par que tienen la clase item */
.item:nth-child(2n) { ... }Ajustaremos la lista. Usaremos un selector con una pseudoclase para quitar el margen derecho sobrante de cada tercera tarjeta.
Con :nth-child(3n) seleccionamos el tercer elemento hijo y después uno de cada tres: el sexto, el noveno y así sucesivamente.
Normalmente no hace falta indicar unidades cuando un margen vale cero, como en margin-right: 0. Omitirlas ayuda a mantener un estilo de código uniforme.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Usa el selector
.card:nth-child(3n)para poner a cero el margen derecho de cada tercera tarjeta.
Volverá a haber tres tarjetas en la primera fila.