[ACCEPTED]-nth-of-type vs nth-child-css-selectors

Accepted answer
Score: 48

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

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

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

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

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


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

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

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

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

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

enter image description here

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

the 6 css for the page goes here:

<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 5 bulb indicates

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

and second red bulb in the 4 code does not work because i is not first 3 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 2 the picture indicates the first type of 1 i in the flow

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

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

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

Score: 3

Heres's a simple example which shows the 9 difference between nth-child vs 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 8 red background will be applied to the 2nd 7 p element inside the div.

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

Using nth-child

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

Here 4 no css is applied.

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

Score: 1

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 10 select the first child of the div but with 9 another condition that child must be a div. here 8 first child is a <div>0</div> but if the first child 7 was a paragraph p: <p>0</p> this selector will not 6 effect the page because there is no first 5 child div the first child is p.

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

Score: 1
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.**

enter image description here

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**

enter image description here

0

Score: 0

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

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

Example of 4 :nth-of-type

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:

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

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

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

Example 2 of :nth-child

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:

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

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

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

More Related questions