Pseudoclase nth-of-type
La pseudoclase nth-of-type selecciona un elemento,
que es el enésimo descendiente del tipo especificado.
Es decir, si escribo h2:nth-of-type(4)
- se encontrará el 4-to h2 en el elemento padre (a diferencia de nth-child,
que solo encontrará aquel h2 que es el
4-to elemento en el elemento padre).
Sintaxis
cssselector:nth-of-type(número | odd | even | expresión){
}
Valores
| Valor | Descripción |
|---|---|
| número |
Número positivo comenzando desde 1. Especifica el número del elemento,
al que queremos aplicar el estilo.
La numeración de elementos comienza desde 1.
|
odd |
Elementos impares. |
even |
Elementos pares. |
| expresión |
Se pueden componer expresiones especiales con la letra n,
que denota todos los números enteros desde cero (no desde uno)
hasta el infinito. Así, 2n significa todos los números pares
(comenzando desde el segundo).
¿Cómo entenderlo? Sustituimos en n secuencialmente
números desde 0 y así sucesivamente: si n = 0, entonces 2n dará 0 -
no existe tal elemento (la numeración de elementos es desde 1),
si n = 1, entonces 2n dará 2 - el segundo elemento, si n = 2,
2n da 4 - el cuarto elemento. Si escribimos 3n - esto
será cada tercer elemento (comenzando desde el tercero), y así sucesivamente.
|
Ejemplo
Encontremos el h2 que es el 2-do h2
en el elemento padre:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
Ejemplo
Encontremos todos los h2 pares:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
Ejemplo
Encontremos todos los h2 impares:
html<div>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
<h2>título</h2>
<p>párrafo</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: