En este artículo, discutiremos todas las diferencias entre los selectores nth-child() y nth-of-type() en jQuery.
Selector nth-child(): este selector 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
}
Ejemplo: este ejemplo describe los usos del selector nth-child().
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS nth-child() Selector</title>
<style>
li:nth-child(even) {
width: 200px;
background: green;
color: blue;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
CSS nth-child() Selector
</h2>
<p>Web Technologies Subjects</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>Node.js</li>
<li>React.js</li>
</ul>
</body>
</html>
Producción:
Selector nth-of-type(): este selector se utiliza para diseñar solo aquellos elementos que son el n-ésimo número de elementos secundarios de su elemento principal. Cualquier n puede ser un número, una palabra clave o una fórmula.
Sintaxis:
:nth-of-type(number) {
// CSS Property;
}
Ejemplo: este ejemplo describe los usos del selector nth-of-type().
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-of-type() Selector</title>
<style>
li:nth-of-type(odd) {
background: green;
font-weight: bold;
width: 200px;
padding: 5px 0;
}
li:nth-of-type(even) {
background: red;
font-weight: bold;
width: 200px;
padding: 5px 0;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-of-type() Selector
</h2>
<p>Web Technologies Subjects</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>Node.js</li>
<li>React.js</li>
</ul>
</body>
</html>
Producción:
Diferencia entre los selectores nth-child() y nth-of-type():
|
Selector nth-child() |
Selector nth-of-type() |
| Este selector se usa para diseñar solo aquellos elementos que son el número n de elementos secundarios de su elemento principal. | Este selector se usa para diseñar solo aquellos elementos que son el número n de elementos secundarios de su elemento principal. |
| Se utiliza para seleccionar todos los elementos que son el enésimo hijo | Se utiliza para seleccionar todos los elementos que son el enésimo hijo |
|
Su sintaxis es -: :nth-child(n|par|impar|fórmula) |
Su sintaxis es -: :n-ésimo-de-tipo(n|par|impar|fórmula) |
|
Se necesitan 4 Parámetros -: 2. incluso elemento hijo 3. elemento hijo impar 4. fórmula -: (an + b) |
Se necesitan 4 parámetros -: 1. índice de cada niño 2. incluso elemento hijo 3. elemento hijo impar 4. fórmula -: (an + b) |
| No considera el tipo de padre al seleccionar los elementos. | Solo considera un tipo particular de padre. |