CSS: selector de nth-child

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: selector de nth-child

Este tutorial de CSS explica cómo usar los selectores de CSS llamados :nth-child Con sintaxis y ejemplos.

describir

El selector CSS :nth-child le permite apuntar a un elemento que es el enésimo hijo de su padre.

sintaxis

La sintaxis para el selector :active CSS es:

element:nth-child(value) { style_properties }

parámetro o parámetro

elemento El n-ésimo elemento de este tipo en su elemento principal.valor

Identificar al niño objetivo. Puede ser uno de los siguientes:

valor describir
incluso Para subelementos pares, donde el primer subelemento es 1
tr: nth-child (par) {fondo: azul;}
2n También dirigido a niños pares.Igual que usar la palabra clave even
La fórmula se evaluará como 2×0, 2×1, 2×2, 2×3, … lo que dará como resultado que todos los niños sean el objetivo.
tr:nth-child(2n) { fondo: azul; }
Extraño Para un número impar de hijos, donde el primer hijo es 1
tr: nth-child (impar) {fondo: azul;}
2n+1 También dirigido a niños raros.Lo mismo que usar palabras clave impares
La fórmula se evaluará como (2×0)+1, (2×1)+1, (2×2)+1, (2×3)+1, … dando como resultado que todos los niños impares sean el objetivo.
tr:nth-child(2n+1) { fondo: azul; }
entero Se dirige a un elemento secundario específico indicado por un valor entero, donde el primer elemento secundario es 1.
1 es el primer hijo, 2 es el segundo hijo, 3 es el tercer hijo, y así sucesivamente.
tr:nth-child(1) { fondo: azul; }
tr:nth-child(2) { fondo: azul; }
tr:nth-child(3) { fondo: azul; }
a+b Posicionar al niño según la fórmula an + b
La fórmula se calculará como (ax0)+b, (ax1)+b, (ax2)+b, (ax3)+b, …
tr:nth-child(3n+2) { fondo: azul; }

style_properties Estilos CSS aplicados al enésimo elemento secundario.

notas

  • El selector :n-th-child es una pseudoclase que le permite apuntar a un elemento que es el n-ésimo hijo de su padre.
  • Consulte también los selectores :first-child, :last-child, :only-child.

Compatibilidad del navegador

El selector CSS :nth-child tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Internet Explorer 9+ (IE 9+)
  • Ópera 10.10+
  • Safari (WebKit)

ejemplo

Discutiremos el selector :nth-child a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos al elemento nth.

usar números pares

Veamos un ejemplo de CSS :nth-child en el que aplicamos el selector :nth-child con la palabra clave par.

CSS se ve así:

tr:nth-child(even) { background: cyan; }

HTML se ve así:

<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>prograrmaplus.com</td>
    <td>Technical reference site</td>
  </tr>
  <tr>
    <td>checkyourmath.com</td>
    <td>Math calculation site</td>
  </tr>
  <tr>
    <td>bigactivities.com</td>
    <td>Kids activity site</td>
  </tr>
</table>

El resultado se verá así (el selector :nth-child establecerá

estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS :nth-child, incluso las filas tendrán un color de fondo cian. El selector :nth-child no aplica estilo a todas las demás filas de la tabla.

usar números impares

Veamos un ejemplo de CSS :nth-child en el que aplicamos el selector :nth-child con palabras clave impares.

CSS se ve así:

tr:nth-child(odd) { background: yellow; }

HTML se ve así:

<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>prograrmaplus.com</td>
    <td>Technical reference site</td>
  </tr>
  <tr>
    <td>checkyourmath.com</td>
    <td>Math calculation site</td>
  </tr>
  <tr>
    <td>bigactivities.com</td>
    <td>Kids activity site</td>
  </tr>
</table>

El resultado se verá así (el selector :nth-child establecerá

estilo de la etiqueta, como se muestra a continuación):

En este ejemplo de CSS :nth-child, las filas impares tendrán un color de fondo amarillo. El selector :nth-child no aplica estilo a todas las demás filas de la tabla.

(Visited 12 times, 1 visits today)