jQuery :firstchild Selector (original) (raw)

jQuery :first-child Selector

Last Updated : 20 Sep, 2024

The :first-child selector allows you to select the first child of its parent element which makes manipulating DOM elements efficient. In this article, we will explore the jQuery :first-child selector, how to use it, and provide practical examples.

What is the jQuery :first-child Selector?

The :first-child selector in jQuery is used to target and manipulate the first child element within a parent container. It helps in cases where you want to apply styles or make changes to the very first element of a group, like the first

(paragraph),

**Syntax:

$("selector:first-child")

• **selector: Specifies the HTML element you want to target.
• ****:first-child:** Ensures that only the first child of the selected parent is manipulated.

Examples of jQuery :first-child Selector

**Example 1: Selecting the First Paragraph Element

In this example, we will use jQuery to select the first paragraph (

) within a container and change its background color to green. This is a simple demonstration of how the :first-child selector works.

HTML `

Geeks

`

**Output:

**Example 2: Selecting the First Paragraph in Different Divs

Let’s see how to use the :first-child selector with multiple parent elements. In this case, we have two different