How to apply styles only to the first child of an element using CSS ?

The :first-child selector is a pseudo-class in CSS that enables you to target the initial child element within a parent container. This selector handpicks elements that are the first immediate child of their parent. It serves as a powerful selector that makes it easier to apply unique styles or modifications to that specific element.

 <div class="container">
    <p>This is the first paragraph.</p>
    <p>Second paragraph follows.</p>
    <p>And here's the third paragraph.</p>
</div>

The basic syntax involves appending :first-child to the parent element’s selector. For instance, to style the first paragraph within a div:

Syntax:

div p:first-child {
    /*Code */
}