CSS Child Selector: Learn to Select the First, Second and Last Child

What child selectors are

To create a CSS child selector, you use two selectors. The child combinator selects elements that match the second selector and are the direct children of the first selector.

Operators make it easier to find elements that you want to style with CSS properties.

Creating a combinator

The CSS child selector has two selectors separated by a > symbol.

• The first selector indicates the parent element.
• The second selector indicates the child element CSS will style.

The example below selects all <p> elements that are children of the <div> element:

div > p {
    background-color: lightblue;
}

Selecting the first child elements

The CSS selector using the > symbol only selects direct children. To find the first child, CSS needs to include :first-child.

The following example shows the outcome when we write p:first-child in CSS and select only the first child to style:

div > p:first-child {
 background-color: lightblue;
}

Using CSS to select the second child

You can find a second child that has a specific type and a parent with :nth-of-type(2).

The example below uses the :nth-of-type(2) selector from CSS to select the second child of <div>:

div > p:nth-of-type(2) {
 background-color: lightblue;
}

Tip: in the brackets of :nth-of-type, you specify which child you want to select.

:nth-of-type vs. :nth-child

The :nth-child() selector is very similar to :nth-of-type(). Here are the main differences:

• :nth-child() selects all specified (for instance, second) children regardless of the type of their parents.
• :nth-of-type() selects the specified children of a specific parent.

Finding the last child

To style the last child with CSS properties, you need to select it with the :last-child selector.

The following example chooses the last child of the <div> element, which will be styled with the CSS background-color property.

div > p:last-child {
 background-color: lightblue;
}

Note: at first, the elements that the :last-child selected had to have parents. Now, you can select the last child among other siblings.

Descendant selectors

Descendant selectors do not have combinators. Instead, CSS separates these selectors with a white space between them.

The descendant selector finds all descendants of a specified element regardless of their position in the DOM tree.

This example selects all descendants of <div>:

div p {
    background-color: lightblue;
}

General Sibling Selectors

The combinator ~ separates two selectors and selects the second element when it comes after the first element, and both selectors have the same parent.

This example selects all <p> elements that are siblings of <div> elements:

div ~ p {
    background-color: lightblue;
}

Adjacent sibling selectors

The + combinator separates two selectors and selects the second element when it comes immediately after the first selector, and both share a parent.

In this example, we select <p> elements that follow the <div> elements:

div + p {
    background-color: lightblue;
}

CSS child selector: useful tips

• The CSS child combinator selects only direct children and goes only one level down the DOM tree. The descendant selector finds elements that are even three levels deep in the DOM.
• :last-child selector is the same as :nth-last-child(1).