What is the meaning of the prefixes of pseudo-elements in css? Like for example - nth-child, what does nth mean at the beginning?
What is the meaning of the prefixes of pseudo-elements in css? Like for example - nth-child, what does nth mean at the beginning?
O nth means nth. That is, nth descending, which is then specified within the parenthesis.
An example would be:
span:nth-child(2n + 1) {
background-color: lime;
}
This CSS will color the odd elements. 2n
would be for pairs. Example: link
Here it has all the elements that are brothers / siblings.
Note that using this HTML:
<div>
<span>Colorido!</span>
<span>Não colorido:(</span>
<em>Não colorido:(</em>
<span>Não colorido:(</span>
<span>Colorido!</span>
</div>
He does not apply anything to <em>
but counts on it! In other words, the nth
refers to the nth descendant / sibling, and not to the tag that is associated to the own, if not in the case above the third span
should be colored because it is odd (if we take into account only the spans)
In addition to the answer from @Sergio, ordinal numbers (taking the top three) are completed with th
to give the indication that they are ordinal:
First
Second
Third Four th
Fif th
Six th
Seven th
Or they can be written as 4th, 5th, 6th
. The nth
in this case, refers to the number n
, ordinarily speaking, referring to the position of the element in its container. In Portuguese it would be something like xth