CSS3 selector: Nth-child and: The difference between the Nth-of-type

One, deep breathing, direct content

: Nth-child and: Nth-of-type are CSS3 in the pseudo-class selector, its role is similar but not exactly the same, for unfamiliar people may not be very different, this article will introduce the difference between the two, in order to facilitate the correct use of both types of selectors.

Let's look at a simple example, first of all, the HTML section:

<section>    <p> I'm 1th p tag </p>    <p> I'm 2nd p tag </p>  <!--want this to turn red--></ Section>

Then the two selectors corresponding to the CSS code are as follows:

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

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

In this example, the two selectors achieve the same effect, and p the second label's text becomes red, as follows (truncated from IE9):

You can really click here:: Nth-child test Demo1:nth-of-type Test Demo1

Although the final effect of the above two demos is the same, there is a certain difference between the two selectors.

For :nth-child selectors, in simple vernacular, it means selecting an element if:

1. This is a paragraph element.
2. This is the second child element of the parent tag

For :nth-of-type selectors, it means selecting an element if:

1. Select the second segment of the parent tag Lazi element

:nth-of-typeSelector, uh ... What do you say? less restrictive conditions.

We can see the difference between the two selectors by making a slight change to the above example, the following HTML code:

<section>    <div> I am a normal div tag </div>    <p> I am the 1th p tag </p>    <p> I am the 2nd p tag </p>  <!--want this to turn red--></section>

or the CSS test code that is consistent with the example above:

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

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

This is when the two selectors render the result differently.

p:nth-child(2)Tragedy, the result of rendering is not the second p label text Red, but the first p label, which is the second child element of the parent tag. The following effects:

You can really click here:: Nth-child test Demo2

p:nth-of-type(2)The performance looks very strong, it will want to render the second p label dyed red, as follows:

You can really click here:: Nth-of-type test Demo2

Comparing the semantics of the above two selectors, the difference in performance here is not difficult to understand.

For p:nth-child(2) this element to be a p label, and the second child element, two conditions must be met. So, the first p label color is red (just match: P tag, second child element). If you div insert a label after the label span , the following:

<section>    <div> I'm a normal div tag </div>    <span> I'm a regular span tag </span>    <p > I am 1th p tag </p>    <p> I am 2nd P tag </p>  <!--want this to turn red--></section>

Then p:nth-child(2) no elements will be selected.

Instead p:nth-of-type(2) of representing the second element under the parent tag p , it is clear that the div span h1 text in the second label is red, whether you insert a label or a label after the label p .

The difference between the two is a realistic analogy with family planning: The former is a second child and a girl, fine! The latter is the tube of his first few births, the second born girl, fine!

二、二次 deep breaths, personal experience

To be honest, for: Nth-child and: Nth-of-type These two properties themselves use not much, the understanding of these two properties is like a group of paste. Impression in the use of :last-child this similar selector, there is no effect of the situation, and now think about it, because the selectors are not well understood, so when using the problem.

Today, after all these two selectors have been well done, individuals feel :nth-of-type more sturdy and less prone to problems, though :nth-child seemingly more common. So later to choose what is the first tag under such an element, it :nth-of-type is recommended to use, because the page element insert other tags AH what is more common, if used :nth-child , the selector may be a belch fart.

However, the world is not absolute, the most reliable is to these two selectors thoroughly understand, specific circumstances specific use.

Another small suggestion, in order to avoid the appearance of "my: Nth-child into soy sauce's not the top bird use!" "It's a good idea to use the parent tag-level limit instead of the current label type limit. The following example:

Dl:nth-child (2) {  }/* Yes, this is going to be a little more */dd:nth-child (2) {}//  This also requires a lot of consideration.

Of course, or that sentence, to see how the actual situation, not once and for all, one party pass the code.

At present, each browser support for these two selectors is very comforting, Firefox 3.5+, Opera 9.5+, Chrome, Safari 3.1+, IE + + are pass. The takeaway is that jquery supports basically the majority of selectors, but it doesn't include this, as it :nth-of-type seems, because the selector is relatively small. If you want jquery to also support the selector, you can use the jquery selector extension to perfectly support each CSS3 selector, and to view this plugin, click here: jQuery CSS3 selector extension.

Yes, the same type of CSS3 pseudo-class selector is not more than these two,, and :first-of-type :last-of-type :nth-last-of-type :only-of-type so on, after the opportunity will be a brief introduction to these several selectors.

Third, the last deep breathing, exhale, indifferent to the conclusion

I've written a controversial article before: Streamline and efficient CSS naming guidelines/methods. According to the inside view, like :nth-child and such :nth-of-type selectors should be used sparingly, one is performance, and the other is that it restricts the reusability of content.

But, still that sentence, everything is not absolute. Sometimes because of the particularity of the design, we may need to have a convenient way to control some special elements, such as the list at the edge of the floating list can not have margin value to achieve the justification effect, and so on. At this point the CSS3 selector is the best solution to weigh down. Therefore, it is necessary to be familiar with and understand the various selectors in CSS3.

Proficiency: Nth-child:nth-child Basic usage

: Nth-child

: Nth-child (8)

Select the 8th child element

li:nth-child(8) span {    background-color: #298EB2; box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;}

Use: Nth-child (8) allows you to select a 8th child element under the parent element

: Nth-child Range Usage

Positive direction Range

: Nth-child (N+6)

Select a child element starting with the 6th

li:nth-child(n+6) span {    background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Use: Nth-child (n+6), which is equivalent to letting you select 6th: Nth-child (6) and all subsequent child elements

Negative direction range

: Nth-child (-n+9)

Select from 1th to 9th child elements

li:nth-child(-n+9) span {    background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using: Nth-child (-n+9), it's quite enough for you to select the 9th and all the child elements before it

Front and back limit range

Nth-child (n+4): Nth-child (-n+8)

Select the 第4-8个 child element

li:nth-child(n+4):nth-child(-n+8) span { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;}

Using Nth-child (n+4): Nth-child (-n+8) We can select a range of sub-elements, the above example is from 4th to 8th child elements

Scope Advanced Usage

Nth-child (n+2): Nth-child (odd): Nth-child (-n+9)

Odd bit/even digit sub-element

  li:nth-child (n+2) :nth-child (odd) :nth-child (-n+9) span {background-color:  #298EB2; box-shadow: inset-3px-3px 10px rgba (0, 0, 0, 0.4), 0 0 10px black;       

Using Nth-child (n+2): Nth-child (odd): Nth-child (-n+9) We will select the child elements from 2nd to 9th bits and contain only odd digits.

Nth-child (3n+1): Nth-child (even) interval Select child element

  li:nth-child (n+2) :nth-child (odd) :nth-child (-n+9) span {background-color:  #298EB2; box-shadow: inset-3px-3px 10px rgba (0, 0, 0, 0.4), 0 0 10px black;       

Use: Nth-child (3n+1) We can select one every 3, that is, 1th, 4, 7 and 10 child elements, but by using: nth-child (even) we filter out the odd bit sub-elements, that is 1 and 7, so the remaining child elements are only 4 and 10.

: The use of Nth-of-type

: Nth-of-type

: Nth-of-type (3)

Specifies that the same child element type is required

/* with blue round spots * *Span: Nth-of-type (3){ Background-color: #298EB2; Box-shadow:Inset-3PX-3px10pxRgba0, 0, 0, 0.4), 0 0 10px black;} /* with orange squares means */div:nth-of-type (4)  { background-color:  #E17149:  Box-shadow:inset-3px- 3px 10px rgba (0, 0, 0, 0.4), 0 0  10px Black;                /span>               

Using: Nth-of-type (), we can specify the same child element type and then select.

: Nth-of-type Range Usage

Positive direction same child element type range

Span:nth-of-type (n+3)

Div:nth-of-type (2n+2)

/* with blue round spots * *Span: Nth-of-type (n+3){ Background-color: #298EB2; Box-shadow:Inset-3PX-3px10pxRgba0,0, 0, 0.4), 0 0 10px black;} /* with orange squares means */div:nth-of-type (2n+2) { background-color:  #E17149:  Box-shadow:inset-3px-< Span class= "number" >3px 10px rgba (0, 0, 0, 0.4), 0 0 10px black;                /span>              

Using Span:nth-of-type (n+3) or Div:nth-of-type (2n+2), you first specify the same child element type, and then select ... in these types ...

Negative direction same child element type range

Span:nth-of-type (-N+4)

Div:nth-of-type (-n+5)

/* with blue round spots * *Span: Nth-of-type (-N+4){ Background-color: #298EB2; Box-shadow:Inset-3PX-3px10pxRgba0,0, 0, 0.4), 0 0 10px black;} /* with orange squares means */div:nth-of-type (-n+5) { background-color:  #E17149:  Box-shadow:inset-3px-< Span class= "number" >3px 10px rgba (0, 0, 0, 0.4), 0 0 10px black;                /span>              

With Span:nth-of-type (-n+4) or Div:nth-of-type (-n+5), you first specify the same child element type, and then select it in these types ...

Limit the same child element type before and after a range

Span:nth-of-type (n+3): Nth-of-type (-n+6)

Div:nth-of-type (n+1): Nth-of-type (-n+3)

/* with blue round spots * *Span: Nth-of-type (n+3): Nth-of-type (-N+6){ Background-color: #298EB2; Box-shadow:Inset-3PX-3px10pxRgba0,0,0, 0.4), 0 0 10px black; }/* with orange squares means */div:nth-of-type (n+ 1) :n-th-of-type (-n+3) { background-color:  #E17149:  Box-shadow:inset-3px-3px 10px rgba (0, 0, 0, 0.4), 0 0 10px Black;              

Use: Nth-of-type (n+3): Nth-of-type (-n+6) and Div:nth-of-type (n+1): Nth-of-type (-n+3), first specifying the same child element type, and then choosing among these types ... In this example, the 第1-3 and 3-6 child elements will be selected.

Advanced same sub-type plus before and after scope restriction usage

Span:nth-of-type (n+3): Nth-of-type (odd): Nth-of-type (-n+6)

Div:nth-of-type (n+1): Nth-of-type (even): Nth-of-type (-n+3)

/* with blue round spots * *Span: Nth-of-type (n+3): Nth-of-type (Odd): Nth-of-type (-N+7){ Background-color: #298EB2; Box-shadow:Inset-3PX-3px10pxRgba0,0,0,0.4),0 0 10px black;} /* with orange squares means */div:nth-of-type (n+1) :nth-ofo-type (even) :nth-of-type (-n+3) { background-color:  #E17149:  Box-shadow:inset-3px-3px 10px rgba (0, 0, 0, 0.4), 0 0 10px Black                /span>             

Using Span:nth-of-type (n+3): Nth-of-type (odd): Nth-of-type (-n+6) and Div:nth-of-type (n+1): Nth-of-type (even): Nth-of-type ( -N+3), you can limit the selection to the same type of child elements, specifying the starting and ending positions of the selection. The parity bit limit is used here as well. All, the last remaining is square 3 & 5 and Circle 2.

From: Http://www.tuicool.com/articles/2eIn6jF

CSS3 selector: Nth-child and: The difference between the Nth-of-type