Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

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

Reading time 3 min
Published Nov 4, 2016
Updated Oct 17, 2019

TL;DR – The > symbol creates a CSS child selector used for finding the direct children of elements.

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:

Example
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:

Example
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>:

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

Example
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>:

Example
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:

Example
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:

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