CSS First Child Selector

What is First Child in CSS ?

Last Updated : 19 Sep, 2024

The :first-child CSS pseudo-class is used to select and style the first child element within its parent. It specifically applies to the first child element, and no matter the type of element, it only applies the styles if the element is the very first child of its parent. This is useful when you want to apply special styling to only the first child in a group of elements.

Syntax:

:first-child {
     //property
}

Example 1: Simple Demonstration of :first-child

In this example, the :first-child selector is used to style the first <p> tag in a div element.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        p:first-child {
            background: limegreen;
            color: white;
            font-style: italic;
            font-size: 1.875em;
        }
    </style>
</head>

<body>
    <p>I am first child.</p>
    <p>I am second child.</p>
    <p>I am third child.</p>
    <p>I am last child.</p>
</body>

</html>

Output:

Example 2: Styling the First Child of Multiple Parent Elements

This example demonstrates how to use the :first-child selector to style the first child of any parent element. Here, we style the first <p> tag in each <div> with red text and bold font.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Child Example</title>
    <style>
        /* Apply styles to the first child of any parent */
        p:first-child {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
    </div>
    <div>
        <span>Not a paragraph.</span>
        <p>This is the first paragraph in the second div.</p>
        <p>This is the second paragraph in the second div.</p>
    </div>
</body>

</html>

Output:

first-child — first child in CSS Example Output

CSS First Child Selector

K

knockpit

Improve

Article Tags :

Similar Reads

CSS First Child Selector

CSS :first-child selector is used to select the elements that are the first child of the parent element. Syntax: :first-child { /* CSS property */ }Example 1: This example shows the use of the CSS first child selector. [GFGTABS] html <!DOCTYPE html> <html> <head> <title>first

What is Float Containment in CSS ?

In this article, we will see what is float containment in CSS. The CSS Float Containment is used to improve the performance of web pages by isolating the subpart of the page from the rest of the page. Once the browsers know that a certain part of code is independent then its rendering can be optimiz

What Is Cascading in CSS?

Cascading in CSS refers to the process by which the browser determines which style rules to apply when multiple rules target the same element. The term "cascading" highlights how CSS applies a hierarchy of rules, where certain rules take precedence over others based on defined principles. For Exampl

CSS :nth-last-child() Selector

The nth-last-child() selector in CSS is used for selecting elements based on their position among sibling elements, but starting the count from the end rather than the beginning. This selector is particularly useful for styling elements dynamically based on their order in reverse, allowing for flexi

How to use a not:first-child Selector in CSS?

The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout. Syntax:not( element ) { // CSS property } Example: In this

What is float property in CSS ?

In this article, we will learn about CSS float property with suitable examples of all available attributes. The float property is used to change the normal flow of an element. It defines how an element should float and place an element on its container's right or left side. The general syntax of the

CSS ::first-line Selector

The ::first-line selector in CSS is used to apply style to the first line of a block-level element. The length of the first line depends on many factors, including the width of the element, the width of the document, font-size of the text, etc. Syntax: ::first-line { //CSS Property}Example: [GFGTABS

CSS :last-child Selector

The CSS :last-child selector targets the last child element within its parent. It applies styles exclusively to the last child based on its position within the parent container, regardless of the element type or class. If the parent element is missing or incorrectly structured, the selector will not

CSS, which stands for Cascading Style Sheets is a language in web development that enhances the presentation of HTML elements. By applying styles like color, layout, and spacing, CSS makes web pages visually appealing and responsive to various screen sizes. CSS allows you to control the look and fee

CSS :nth-child() Selector

The :nth-child() pseudo-class selector targets elements based on their position among siblings, making it ideal for dynamic styling. It can select elements using specific positions (e.g., first, odd, or even), or patterns like An+B. This flexible CSS tool improves web design by simplifying how you a