El selector de pseudoclase CSS :nth-child() se utiliza para hacer coincidir los elementos en función de su posición en un grupo de hermanos. Coincide con cada elemento que es el enésimo hijo, independientemente del tipo, de su padre.
Sintaxis:
:nth-child(number) {
// CSS Property
}
Donde número es el único argumento que representa el patrón para elementos coincidentes. Puede ser impar, par o en notación funcional.
- impar: Representa elementos cuya posición es impar en una serie: 1, 3, 5, etc.
- par: Representa los elementos cuya posición es par en una serie: 2, 4, 6, etc.
- notación funcional (<An+B>): Representa elementos cuya posición de hermanos coincide con el patrón An+B, para todo entero positivo o valor cero de n. Aquí, A representa el tamaño del paso entero, B representa el desplazamiento entero.
Ejemplo 1: En este ejemplo, se seleccionan todos los párrafos impares. La fórmula utilizada es 2n+1, es decir, se seleccionan 1, 3, 5, etc. párrafos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
p:nth-child(2n+1) {
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-child Selector
</h2>
<p>A computer science portal for geeks.</p>
<p>Geeks classes an extensive classroom programme.</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, se selecciona cada <li> par, es decir, 2, 4, 6, etc.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
li {
width: 30%;
}
li:nth-child(even) {
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center">
<h2>
CSS :nth-child Selector
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Quick sort.</li>
<li>Merge sort.</li>
<li>Insertion sort.</li>
<li>Selection sort.</li>
</ul>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el selector :nth-child() se enumeran a continuación:
- Google Chrome 4.0
- Microsoft Edge 12.0
- Firefox 3.5
- Ópera 9.6
- Apple Safari 3.2
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA