CSS Instance Tutorial:: Nth

Article Introduction: : The difference between Nth-child and: nth-type-of.

Original: Thedifference between:nth-child and:nth-of-type

:Nth-child and: The difference between nth-type-of

Suppose you have the following HTML code:

<section>
     <p>Little</p>
     <p>Piggy</p>
		<!--target element-->
</ Section>

The following code has the same effect:

P:nth-child (2) {color:red;} 
P:nth-of-type (2) {color:red;}

The results are the same, but they are different in themselves.

: The nth-child selector means, in terms of meaning,

Select elements that meet the following criteria:

• 1. is a paragraph element p
• 2. Is the second child element of the parent element

: The Nth-of-type selector, in terms of meaning, means:

• 1. Select the second paragraph element p of the parent element

: Nth-of-type is ... What's the deal, huh? Less conditional offer.

Suppose the structure changes as follows:

<section>
     
 
This way, then, is "broken":
 
P:nth-child (2) {color:red;}
 
However, this is still "available":
 
P:nth-of-type (2) {color:red;}
 
The so-called "broken" means the above: the Nth-child selector is now selected as "Little" instead of "piggy" because this element satisfies all of the following conditions:
 

 

 
  
 
   
1) It is the second word element
 
   
2 It is a paragraph element p
 
  

 
 
The word "can use" means that "piggy" is still selected because it is the second paragraph element p under its parent element.
 
If you add a H2 after H1, then: the Nth-child selector will not be selected, because then the second child element is no longer a paragraph element p. But: Nth-of-type is still valid.
 
I feel: nth-of-type is relatively less fragile and generally more useful, although: Nth-child is more common (author's personal opinion). How often do you think "I want to select the second child element of the parent element if it happens to be a paragraph element p"? There may be a few times, but more likely you want to "select the second paragraph" or "select a row every two lines (select every third table row)", which means that nth-of-type is a better option (again, the author's personal opinion).
 
I found when I complained, "Why: Nth-child selector?" , the absolute majority is because the label is qualified before the selector, and the child element of that position is not the label. So when using: Nth-child, I think it's best to just specify the parent element and do not restrict it with a label: Nth-child.
 
Dl:nth-child (2) {}/* Recommended 
/* Dd:nth-child (2) {}/* not very good * *
 
Of course, the specific situation has to be specific analysis. (Why I don't like this phrase-sugar with tomatoes)
 
Browser for: Nth-of-type support is quite good ... Firefox 3.5+, Opera 9.5+, Chrome, Safari 3.1+, IE 9+. If you need more support, jQuery should stand by you (using the selector, add a class name, and use the class name to add the style $ ("Selector:nth-child (xxxxx)"). AddClass ("SomeClass")), but actually jQuery But gave up the right: Nth-of-type support, it is very strange, it is said to be because: Nth-of-type use rate is very low. There is a plugin that allows jQuery to support it.
 
Related: Don't forget it these great sisters: First-of-type:last-of-type:nth-last-of-type and: Only-of-type. more please see here .
 
Here's a visual example of a Lea Verou.