Qual o significado dos prefixos dos pseudo-elementos em css? Como por exemplo - nth-child, o que significa o nth no inicio?
2 Respostas
O nth significa enésimo. Ou seja descendente n-ésimo, que depois é especificado dentro do parentesis.
Um exemplo seria:
span:nth-child(2n + 1) {
background-color: lime;
}
Este CSS irá colorir os elementos ímpares. 2n
seria para pares.
Exemplo: http://jsfiddle.net/wc2gs1g4/
Aqui ele conta com todos os elementos que são irmãos/siblings.
Nota que usando este HTML:
<div>
<span>Colorido!</span>
<span>Não colorido:(</span>
<em>Não colorido:(</em>
<span>Não colorido:(</span>
<span>Colorido!</span>
</div>
Ele não aplica nada ao <em>
mas conta com ele! Ou seja o nth
refere-se a enésimo descendente/sibling, e não à tag que é associada ao próprio, senão no caso em cima o terceiro span
deveria ser colorido pois é ímpar (se tivermos em conta só os spans)
jsFiddle: http://jsfiddle.net/wc2gs1g4/1/
A lêr: MDN - nth-child() em Inglês
-
Quanto a aplicação é tranquilo, gostaria mesmo de saber o significado. Agradeço as respostas. 28/01/2015 às 13:41
Em adição a resposta do @Sergio, em inglês, números ordinais (tirando os três primeiros) são completados com th
para dar a indicação de que são ordinais:
First
Second
Third
Fourth
Fifth
Sixth
Seventh
Ou podem ser escritos como 4th, 5th, 6th
. O nth
no caso, se refere ao numero n
, ordinariamente falando, se referindo a posição do elemento em seu container. Em português seria algo como xth
nth
significa enésimo... (acho que é assim que se escreve). Ou seja descendente n-ésimo, que depois é indicado dentro do parentesis. É isso que procuras saber?