CSS :nth-child & :nth-of-type

Mastering CSS Pseudo-Classes: nth-child vs. nth-of-type

When we have a bunch of elements nested in a parent, we could give each child element a class. But that is tedious! Instead, we can call upon the child elements using a pseudo-class. There are different approaches to this, and we will break down each.

1. :nth-child() — The “Indiscriminate” Selector

This pseudo-class will select any child element within the parent container and it will not discriminate based on what kind of element it is. If there is a mix of <div> and <li> in the parent, it treats them all as equal candidates in the count.

The Setup:

<div class="parent">
    <li><h1>1</h1></li>
    <li><h1>2</h1></li>
    <li><h1>3</h1></li>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
    <div><h1>6</h1></div>
    <div><h1>7</h1></div>
    <div><h1>8</h1></div>
    <div><h1>9</h1></div>
    <div><h1>10</h1></div>
</div>

The Analogy: Chores for 10 Kids

Imagine you have 10 kids and you call them all to do their chores. Instead of calling them each by name, you say, “Hey kids! Come here, it’s time to do the chores.”

Once they gather, if you want all of them to work on the garage, the CSS would look like this:

.parent > * {
    clean: garage; /* Concept property */
}

But if we wanted to split things up specifically using ranges:

/* Select the first 3 children */
.parent *:nth-child(-n+3) {
    wash: dishes;
}

/* Select a range from the 4th to the 8th */
.parent *:nth-child(n+4):nth-child(-n+8) {
    clean: garage;
}

/* Select a range from the 9th to the 10th */
.parent *:nth-child(n+9):nth-child(-n+10) {
    clean: yard;
}

Odd and Even Selection

What if we wanted to send all the odd-numbered children or even-numbered ones to paint the wall a certain color?

div:nth-child(odd) {
    background-color: green;
}

div:nth-child(even) {
    background-color: blue;
}

2. :nth-of-type() — The “Discriminating” Selector

The difference with :nth-of-type is that it does discriminate based on the type of element. If the parent has different types of elements (headings, paragraphs, lists), it will only count the specific type you tell it to.

The Setup:

<div class="container">
    <h1>Heading</h1>
    <p>Some Paragraph 1</p>
    <p>Some Paragraph 2</p>
    <p>Some Paragraph 3</p>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</div>

The Target:

If we use nth-last-of-type, we are counting from the bottom up within that specific group of elements. In the example below, we are targeting the 2nd paragraph from the bottom of the list of paragraphs.

/* This selects Paragraph 2, because it is the 2nd paragraph from the end */
.container p:nth-last-of-type(2) {
    color: red;
    font-weight: bold;
}

Quick Reference Table

Categorised in: WEBD 150

This post was written by amax