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á
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á
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.