Pseudoclasse nth-of-type
A pseudoclasse nth-of-type seleciona um elemento
que é o enésimo descendente do tipo especificado.
Ou seja, se eu escrever h2:nth-of-type(4)
- será encontrado o 4° h2 no elemento pai (ao
contrário da nth-child,
que encontrará apenas o h2 que é o
4° elemento no elemento pai).
Sintaxe
cssseletor:nth-of-type(número | odd | even | expressão){
}
Valores
| Valor | Descrição |
|---|---|
| número |
Um número positivo a partir de 1. Especifica a posição do elemento
ao qual queremos nos referir.
A numeração dos elementos começa em 1.
|
odd |
Elementos ímpares. |
even |
Elementos pares. |
| expressão |
É possível criar expressões especiais com a letra n,
que representa todos os números inteiros a partir de zero (não de um)
até o infinito. Assim, 2n significa todos os números pares
(a partir do segundo).
Como entender isso? Substituímos n sequencialmente por
números de 0 em diante: se n = 0, então 2n resulta em 0 -
esse elemento não existe (a numeração dos elementos começa em 1),
se n = 1, então 2n resulta em 2 - o segundo elemento, se n = 2,
2n resulta em 4 - o quarto elemento. Se escrevermos 3n - isso
será cada terceiro elemento (a partir do terceiro), e assim por diante.
|
Exemplo
Vamos encontrar o h2 que é o 2° h2
no elemento pai:
html<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
Exemplo
Vamos encontrar todos os h2 pares:
html<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
Exemplo
Vamos encontrar todos os h2 ímpares:
html<div>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
<h2>título</h2>
<p>parágrafo</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: