CSS3 selector: Nth-child and: Differences between Nth-of-type

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]

This address: http://www.zhangxinxu.com/wordpress/?p=1709

Reference article: the difference between:nth-child and: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.

With the Ie6~8 browser slowly sunset, the era of CSS3 may be unknowingly arrived, in the face of this inevitable trend, we are ready to do.

Thanks for reading, we welcome correction.

CSS3 selector: Nth-child and: Differences between Nth-of-type (RPM)