nth-of-type vs nth-child

I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.

我对nth-of-type伪类有点困惑，以及它应该如何工作 - 特别是与nth-child类相比。

Maybe I have the wrong idea, but given this structure

也许我有错误的想法，但鉴于这种结构

<div class="row">
    <div class="icon">A</div>
    <div class="icon">B</div>
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
</div>

..the third child element (first with class label) should (perhaps?) be selectable with

..第三个子元素（第一个带有类标签）应该（可能是？）可以选择

.row .label:nth-of-type(1) {
    /* some rules */
}

However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as nth-child - therefore, what is the difference between this and nth-of-type?

但是，至少在Chrome中，它不会选择它。只有当它是行中的第一个子节点时才会起作用，这与nth-child相同 - 因此，它与nth-of-type有什么区别？

7 个解决方案

#1

The nth-child pseudo-class refers to the "Nth matched child element", meaning if you have a structure as follows:

nth-child伪类引用“第N个匹配的子元素”，这意味着如果你有如下结构：

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

    <p>Target</p>
</div>

Then p:nth-child(2) will select the second child which is also a p (namely, the p with "Paragraph").
p:nth-of-type will select the second matched p element, (namely, our Target p).

然后p：nth-​​child（2）将选择也是p的第二个孩子（即带有“Paragraph”的p）。 p：nth-​​of-type将选择第二个匹配的p元素（即我们的目标p）。

Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com

这是Chris Coyier @ CSS-Tricks.com关于这个主题的精彩文章

---

The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn't match the rules you mentioned (.row .label), therefore the rule doesn't apply.

你的中断的原因是因为type引用了元素的类型（即div），但是第一个div与你提到的规则（.row .label）不匹配，因此该规则不适用。

The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.

原因是，CSS从右到左解析，这意味着浏览器首先查看：nth-​​of-type（1），确定它搜索div类型的元素，这也是它的第一个类型，匹配.row元素和第一个.icon元素。然后它读取该元素应该具有.label类，它与上述内容无关。

If you want to select the first label element, you'll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).

如果要选择第一个标签元素，则需要将所有标签包装在自己的容器中，或者只使用nth-of-type（3）（假设总有2个图标）。

Another option, would (sadly) be to use... wait for it... jQuery:

另一个选择，（遗憾地）是使用...等待它... jQuery：

$(function () {
    $('.row .label:first')
        .css({
            backgroundColor:"blue"
        });
});

#2

.label:nth-of-type(1)

"type" here refers to the type of element. In this case, div, not to the class. This does not mean the first element which is .label, it instead means the first element of its type which also has a class of label.

“type”在这里指的是元素的类型。在这种情况下，div，而不是类。这并不意味着第一个元素是.label，它意味着它的类型的第一个元素，它也有一个标签类。

There are no elements with a class of label which are at index 1 of their type.

没有带有标签类的元素，这些元素位于其类型的索引1处。

#3

in the picture out of added 10 elements, 8 are <p> and 2 are <i>, the two shaded part elements are indicating <i> remaining eight are <p>

在图片中添加了10个元素，8个是

，2个是，两个阴影部分元素表示剩下的8个

the css for the page goes here:

页面的CSS到这里：

<style>
    * {
        padding: 0;
        margin:0;
    }
    section p {
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    }
    section i {
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    }
   section p:nth-child(1) {
        background-color: green; /*first-child of p in the flow*/
    }
   section i:nth-child(1) {
        background-color: red;  /*[first-child of i in the flow]NO */
    }
   section i:nth-of-type(1) {
        background-color: blue;  /*the type i of first child in the flow*/
    }
    </style>

</head>

<body>

    <section>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <i></i>
        <p></p>
        <i></i>
        <p></p>
        <p></p>
        <p></p>
    </section>
</body>

the first green bulb indicates

第一个绿色灯泡表示

 section p:nth-child(1) {
                background-color: green; /*first-child of p in the flow*/
            }

and second red bulb in the code does not work because i is not first elements in the flow

并且代码中的第二个红色灯泡不起作用，因为我不是流程中的第一个元素

section i:nth-child(1) {
            background-color: red;  /*[first-child of i in the flow]NO */
        }

and the blue bulb in the picture indicates the first type of i in the flow

并且图中的蓝色灯泡表示流程中的第一种i

section i:nth-of-type(1) {
            background-color: blue;  /*the type i of first child in the flow*/
        }

#4

Here is an example:

这是一个例子：

<div>
    <div >0</div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
</div>

this selector: div div:nth-child(1) will select the first child of the div but with another condition that child must be a div. here first child is a <div>0</div> but if the first child was a paragraph p: <p>0</p> this selector will not effect the page because there is no first child div the first child is p.

这个选择器：div div：nth-​​child（1）将选择div的第一个子节点，但是另一个条件是child必须是div。这里第一个孩子是

0 ，但如果第一个孩子是一个段落p：

0 这个选择器不会影响页面，因为没有第一个子div第一个孩子是p 。

but this selector: div div:nth-of-type(1) if the first child was a <div>0</div> will effect it, but if the first child is <p>0</p> now he will effect the second child <div>1</div> because it's the first child of his type div.

但是这个选择器：div div：nth-​​of-type（1）如果第一个孩子是

0 会影响它，但如果第一个孩子

0 现在他将影响第二个孩子

1 ，因为它是他的类型div的第一个孩子。

#5

:nth-of-type is used to select a sibling of a particular type. By type I mean a type of tag as in <li>, <img>, <div> etc.

：nth-​​of-type用于选择特定类型的兄弟。按类型我的意思是一种标签，如

，，

等。

,,等。

:nth-child is used to select children of a particular parent tag without regard to a type

：nth-​​child用于选择特定父标记的子级而不考虑类型

Example of :nth-of-type

示例：nth-​​of-type

HMTL:

HMTL：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS:

CSS：

Notice that there is no space between the <li> tag and the pseudo-class nth-of-type.

请注意，

标记和伪类nth-of-type之间没有空格。

标记和伪类第n的型之间没有空格。

li:nth-of-type(odd) { background-color: #ccc; }

li：nth-​​of-type（odd）{background-color：#ccc; }

Result: https://jsfiddle.net/79t7y24x/

结果：https：//jsfiddle.net/79t7y24x/

Example of :nth-child

例子：nth-​​child

HTML:

HTML：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS:

CSS：

Notice here that there is a space between the <ul> tag and the :nth-child pseudo-class

请注意，

标记和：nth-​​child伪类之间有一个空格

ul :nth-child(even) { background-color: red }

ul：nth-​​child（偶数）{background-color：red}

Result: https://jsfiddle.net/o3v63uo7/

结果：https：//jsfiddle.net/o3v63uo7/

#6

Heres's a simple example which shows the difference between nth-child vs nth-of-type.

Heres是一个简单的例子，它显示了nth-child与nth-of-type之间的区别。

Consider the following html

<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>

Using nth-of-child

p:nth-of-child(2){
    background:red;
}

The red background will be applied to the 2nd p element inside the div.

红色背景将应用于div内的第二个p元素。

This happens because nth-of-child bascially means to find nth p tag(in this case 2nd p tag) inside a container

发生这种情况是因为nth-of-child基本上意味着在容器内找到第n个p标签（在这种情况下是第2个p标签）

Using nth-child

p:nth-child(2){
    background:red;
}

Here no css is applied.

这里没有应用css。

This happens because nth-child basically means to find nth tag inside a container(in this case 2nd tag is div) and check if it is p tag

这是因为nth-child基本上意味着在容器内找到第n个标签（在这种情况下，第二个标签是div）并检查它是否是p标签

#7

element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example



     <html>
        <head>
        </head>
        <body>
          <div>
            <p> This is paragraph in first div</p>
           <input type="text" placeholder="Enter something"/>
            <p>This is a paragraph </p>
          </div>
          <div>
            <p>This is paragraph in second div</p>
            <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>
             <label> This is label <strong>inside Unordered List</strong></label>
            </li>

          </ul>

           </div>
        </body>
    </html>


**This above html will look like this.**

Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.

we can achieve styling like this

<style type="text/css">
                div:nth-of-type(2) li:nth-of-type(2){
                    color: red;
                    font-weight: bold;
                }
            </style>

explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .

Final Code :



     <html>
            <head>
                <style type="text/css">
                    div:nth-of-type(2) li:nth-of-type(2){
                        color: red;
                        font-weight: bold;
                    }
                </style>
            </head>
            <body>
              <div>
                <p> This is paragraph in first div</p>
               <input type="text" placeholder="Enter something"/>
                <p>This is a paragraph </p>
              </div>
              <div>
                <p>This is paragraph in second div</p>
                <ul>
                <li>First Item</li>
                <li>Second Item</li>
                <li>
                 <label> This is label <strong>inside Unordered List</strong></label>
                </li>

              </ul>

               </div>
            </body>
        </html>

**And Final output will look like this**