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

2

What is the meaning of the prefixes of pseudo-elements in css? Like for example - nth-child, what does nth mean at the beginning?

    
asked by anonymous 28.01.2015 / 14:21

2 answers

7

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)

jsFiddle: link

Read: MDN-nth-child () in English

    
28.01.2015 / 14:30
2

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

    
28.01.2015 / 22:41