Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
04
11

Pseudo-clase Nth-child

Las pseudo-clases de CSS3 nos ayudan mucho a crear completos diseños sin necesidad de llenar una web de código, como pasa con :nth-child(), una pseudo-clase.
Con :nth-child() podemos diferenciar líneas, listas o párrafos cambiando su estilo, para así poder diferenciar más fácilmente distintos elementos. Esto es muy útil en tablas o líneas de código, para no mezclar filas.

Reslta filas o línas con nth-child.

Esta pseudo-clase nos permite aplicar distintos estilos a varios elementos iguales, pero discriminándolos por un patrón especifico. Este patrón es numérico y nos permite diferencias líneas pares e impares o marcar cada 3 o 4 líneas.
Aunque también tenemos un par de palabras reservadas, que son: odd (impar) y even (par). Pero vamos a ver todo el repertorio de posibilidades que ofrece la pseudo.clase.

Cómo usarlo

Esta pseudo-clase afecta a elementos con la misma identificación en el CSS, ya sea que compartan una misma clase o que sean elementos iguales.

  1. <div></div> <!-- Coloreado -->
  2. <div></div>
  3. <div></div> <!-- Coloreado -->

  1. /* Colorea los impares */
  2. div:nth-child(2n+1) {
  3. background: red;
  4. }
  5. /* También colorea impares */
  6. div:nth-child(odd) {
  7. background: red;
  8. }

En :nth-child() se establece un patrón de una forma muy simple, pudiendo interactuar con el de tres formas:

  • Número: establecemos la posición del elemento que modificaremos de forma numérica.
  • Intervalo: establecemos cada cuantos elementos añadiremos nuestro estilo. Se usa el valor "n" como multiplicador, precedido del número que establece el intervalo (como 2n o 3n).
  • Intervalo más número: también podemos combinar ambas, y establecer un intervalo modificando su inicio, sumando o restando un número.

En la práctica actúa de la siguiente forma si tenemos el patrón "3n+1" significa qué los siguientes elementos se colorean:

  • 3 x 0 + 1 = 1: el primer elemento.
  • 3 x 1 + 1 = 4: el cuarto elemento.
  • 3 x 2 + 1 = 7: el séptimo elemento.

Como detalle, os comento que se pueden llevar a práctica su uso con multiplicador de intervalo negativo (-2n, por ejemplo) y sumarle cierto número para que sea visible, lo que nos permite añadir un intervalo a los primeros de una lista, por ejemplo.

En la siguiente lista muestro como se visualizaría cada patrón.

2
12345678

4
12345678

odd
12345678

even
12345678

3n+2
12345678

3n-2
12345678

-n+4
12345678

-2n+3
12345678

Resumen

Su uso es muy común y necesario en multitud de ocasiones, te permite ahorrar poner para cada línea par e impar una clase, por poner un ejemplo, o al igual pasa con las listas HTML, que nos permite modificar el número o símbolo que las encabeza con facilidad.

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: