We can select the first child of the given HTML element in different ways. But CSS provides the first-child attribute in order to select the first child of the given HTML element. We will also learn nth-child to select the first child.

first-child Syntax

The first-child CSS attribute syntax is like below.

HTML_ELEMENT:first-child {
   CSS_CODE;
}

`HTML_ELEMENT` is the element type of element we want to select its first child.
`:first-child` is the CSS selector for the first child.
`CSS_CODE` is the CSS attributes we want to apply to the given first child elements.

Select First Child with first-child CSS

We will use first-child of the given HTML elements. We will set every first child background color to the yellow. In the example, we will set the body first element and div’s first elements background color to the yellow.

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
   background-color: yellow;
}

div {
   border-style: groove;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
  <div>
    <p>This paragraph is the first child of its parent (div).</p>
    <p>This paragraph is not the first child of its parent.</p>
  </div>
</div>
<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>


</body>
</html>

Select First Child with nth-child CSS

nth-child is another CSS selector that can be used to select the first child of the given HTML element. nth-child() works like a function where we will provide the child order number to the nth-child selector which will be 1 in this case.

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(1) {
   background-color: yellow;
}

div {
   border-style: groove;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
  <div>
    <p>This paragraph is the first child of its parent (div).</p>
    <p>This paragraph is not the first child of its parent.</p>
  </div>
</div>
<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>


</body>
</html>

Select First Child HTML Element of the Given HTML Element

Select First List Item

We can use the first-child in order to select the first item of a list.

<html>
<head>
<style>

ul li:first-child {
  color: red;
  font-weight: bold;
}

</style>
</head>
<body>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>


</body>
</html>

Select First Div

We can also select the first div of the HTML elements.

<html>
<head>
<style>

div {border-style: groove;}

div:first-child {
color: red;
font-weight: bold;
}

</style>
</head>
<body>

<div> First div </div>
<div> Second div </div>
<div> Third div </div>
<div> Fourth div </div>
<div> Fifth div </div>
<div> Sixth div </div>
<div> Seventh div </div>


</body>
</html>

Select Last Child HTML Element with CSS last-child

CSS also provides the last-child selector which will select the last child of the given HTML element and apply given CSS.

<html>
<head>
<style>

div {border-style: groove;}

div:last-child {
color: red;
font-weight: bold;
}

</style>
</head>
<body>

<div> First div </div>
<div> Second div </div>
<div> Third div </div>
<div> Fourth div </div>
<div> Fifth div </div>
<div> Sixth div </div>
<div> Seventh div </div>


</body>
</html>

Select Last Child HTML Element with CSS last-child

LEARN MORE CSS :nth-child Element Selector

CSS first-child Selector Tutorial with Examples