What is the meaning of the prefixes of pseudo-elements in css?

Question

What is the meaning of the prefixes of pseudo-elements in css? For example - Nth-Child, which means Nth at the beginning?

Answer 1

The Nth means nth. Or be nth descendant, which is then specified within the parentheses.

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: http://jsfiddle.net/wc2gs1g4/

Here he 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 doesn’t apply anything to <em> but count on it! That is to say nth refers to the nth descending/sibling, and not to the tag that is associated with itself, but in the case above the third span should be colored because it is odd (if we take into account only the spans)

jsFiddle: http://jsfiddle.net/wc2gs1g4/1/

---

Reading: MDN - Nth-Child() ^{in English}

Answer 2

In addition to @Sergio’s reply, in English, ordinal numbers (excluding the first three) are completed with th to indicate that they are ordinal:

First
Second
Third
Fourth
Fifth
Sixth
Seventh

Or they can be written as 4th, 5th, 6th. The nth in the case, refers to the n, ordinarily speaking, referring to the position of the element in its container. In English it would be something like xth