nth-of-type vs nth-child

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

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

Using nth-child

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

Here no css is applied.

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


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

<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).

Here's a great article on the subject by 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.

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.

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).

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

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


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

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


enter image description here

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>

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

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

Tags:

Css

Css Selectors

Recent Posts