CSS :first-child And :last-child Selectors

In this tutorial, we will understand :first-child and :last-child selectors in CSS with the help of examples.

The :first-child selector in CSS is a pseudo-class that selects any element that is the first child element of its parent. In other words, the :first-child selector selects an element that is the first child of another element.

This selector is equivalent to :nth-child(1), which also selects the first child of a parent. You can use the :first-child selector with any type of element (like <div>, <p>, <li>, etc.) to apply styles that is the first child of its parent.

Basic Syntax to Define :first-child Selector in CSS

The general syntax for using :first-child selector to apply the CSS rule to the first child of another element is as follows:

element:first-child {
   /* CSS properties */
}

In the above syntax, the element represents the type of any element like p, li, div, etc. you want to select. The :first-child is a pseudo-class that targets only the first child of its parent element.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the first child element of its parent element. */
p:first-child {
   color: white;
   font-weight: bold;
   background-color: green;
}
</style>
</head>
<body>
<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
   <p>Paragraph 4</p>
</div>
</body>
</html>

Output:

CSS :first-child selector example.
In this example, the p:first-child selector selects the first child <p>(Paragraph 1) element of the parent div element and applies the CSS rules.

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the first child li element of its parent ul element. */
li:first-child {
   color: blue;
   font-weight: bold;
}
</style>
</head>
<body>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
</body>
</html>

In this example, the li:first-child selector will select only “Item 1” to apply CSS style because it is the first child of its parent <ul>.

CSS :last-child Selector

The :last-child selector in CSS is a pseudo-class selecting an element that is the last child element of its parent. In other words, the :first-child selector selects an element that is the last child of another element.

This selector is equivalent to :nth-last-child(1), which also selects the last child of a parent element. You can use the :last-child selector with any type of element to apply CSS rule that is the last child of its parent.

Syntax for CSS :last-child Selector

The basic syntax to create :last-child selector in CSS that selects the last child element of its parent is as follows:

element:last-child {
   /* CSS properties */
}

Let’s take an example in which we will style the last child of its parent element.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the last child li element of its parent ul element. */
li:last-child {
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</body>
</html>

In this example, the li:last-child selector will select the “Item 3” to apply the CSS style because it is the last child of the parent <ul>.

Output:

CSS :last-child selector example.

Combining :first-child Selector with Other Selectors

You can use :first-child selector with other selectors to create more specific styles. Let’s take an example in which we will combine the :first-child selector with the class selector.

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
/* Combining the :first-child selector with the class selector to style the first child element of its parent. */
.container p:first-child {
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
   <p>Paragraph 4</p>
</div>
</body>
</html>

In this example, the .container p:first-child selector will select the first child i.e. <p> element of the parent div element with class attribute value “container”.

Combining :first-child and :last-child Selectors with ID Selector

You can combine the :first-child and :last-child selector with an ID selector to apply CSS styles to the first child element and last child element of its parent element that also matches a particular ID.

Example 5:

<!DOCTYPE html>
<html>
<head>
<style>
/* Combining the :first-child selector with the ID selector to style the first child element of its parent. */
#container p:first-child {
   color: blue;
   font-weight: bold;
}
/* Combining the :last-child selector with the ID selector to style the last child element of its parent. */
#container p:last-child {
   color: red;
   font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
   <p>First Paragraph</p>
   <p>Second Paragraph</p>
   <p>Third Paragraph</p>
   <p>Fourth Paragraph</p>
</div>
</body>
</html>

In this example code, the #container p:first-child selector will select the first child element (First Paragraph) of its parent element with id attribute value “container”. Similarly, the #container p:last-child selector will select the last child element (Fourth Paragraph) of its parent element with id attribute value “container”.

Using :first-child and :last-child in Nested Structure

You can also target the first and last child element within a nested structure to apply styles selectively. Here’s an example in which we will select the first and last child elements within the nested structure.

Example 6:

<!DOCTYPE html>
<html>
<head>
<style>
.parentContainer .childContianer p:first-child {
   text-decoration: underline;
   color: blue;
   font-weight: bold;
}
.parentContainer .childContianer p:last-child {
   text-decoration: underline;
   color: blue;
   font-weight: bold;
}
</style>
</head>
<body>
<div class="parentContainer">
   <p>First paragraph</p>
   <p>Second paragraph</p>
   <div class="childContianer">
       <p>Third paragraph</p>
       <p>Fourth paragraph</p>
       <p>Fifth paragraph</p>
       <p>Six paragraph</p>
   </div>
</div>
</body>
</html>

In this example, the .parentContainer .childContianer p:first-child selector will select the first child element (i.e. Third paragraph) of its parent div element with class attribute value “childContainer”.

Similarly, the .parentContainer .childContianer p:last-child selector will select the last child element (i.e. Six paragraph) of its parent div element with class attribute value “childContainer”.

Common Errors

Misunderstanding the Selectors

In CSS, the :first-child and :last-child selectors select the first and last child of its parent element. Both do not select the first and last occurrence of an element type. Look at the example below.

Example 7:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
   color: red;
}
</style>
</head>
<body>
<div>
   <h1>Heading</h1>
   <p>First paragraph</p>
   <p>Second paragraph</p>
</div>
</body>
</html>

In this example, the p:first-child selector will not select any <p> elements because the first child of the parent div element is an <h1>, not a <p> element.

Combining with Other Pseudo-Classes Incorrectly

When you use multiple pseudo-classes, the order matters. If you make an incorrect order of them, it may result in unexpected behavior.

Example 8:

p:last-child:first-child {
   /* Invalid selector as it is not meaningful */
}

Correct Usage:

p:first-child:last-child {
   /* Valid selector */
}

Here, you have learned the :first-child and :last-child selectors in CSS for targeting the first and last child elements of its parent element. By understanding how to use them effectively and avoiding common errors, you can create more precise CSS styles in the HTML document.

Related Posts

Trending now

Superglobal Variables in PHP with Examples
CSS :first-of-type selector example
CSS :first-of-type And :last-of-type Selectors
PHP Constants with Examples
CSS :only-child Selector with Example