Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery :first-child Selector

Posted in jQuery Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 55 - Views
⏳ 4 mins
💬 1 Comment
jQuery :first-child Selector

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a plethora of selectors to simplify DOM manipulation, and one of the most useful ones is the :first-child selector. This selector enables you to target the first child element of its parent effortlessly. Understanding how to utilize the :first-child selector effectively can streamline your web development process and enhance the interactivity of your web pages.

In this guide, we'll explore the usage of the jQuery :first-child selector through clear examples to help you grasp its full potential.

🧠 Understanding :first-child Selector

The :first-child selector targets the first child element within its parent. It's particularly handy when you need to apply styles or perform actions specifically on the first child of an element.

💡 Syntax

The syntax for the :first-child selector is straightforward:

syntax.js
Copied
Copy To Clipboard
$("parentSelector :first-child")

📝 Example

  1. Selecting the First Paragraph Element:

    Suppose you have a <div> containing multiple <p> elements, and you want to target the first <p> element for styling. You can achieve this using the :first-child selector as follows:

    index.html
    Copied
    Copy To Clipboard
    <div id="container">
      <p>First paragraph</p>
      <p>Second paragraph</p>
      <p>Third paragraph</p>
    </div>
    example.js
    Copied
    Copy To Clipboard
    $("#container p:first-child").css("font-weight", "bold");

    This will make the text of the first paragraph bold.

  2. Applying Styles to the First List Item:

    Consider a <ul> list where you want to emphasize the appearance of the first list item. You can use the :first-child selector to achieve this effect:

    index.html
    Copied
    Copy To Clipboard
    <ul id="list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
    example.js
    Copied
    Copy To Clipboard
    $("#list li:first-child").css("color", "blue");

    This will change the color of the text in the first list item to blue.

  3. Adding a Class to the First Table Row:

    Suppose you have a table and you want to differentiate the styling of the first row. You can utilize the :first-child selector to add a class to the first <tr> element:

    index.html
    Copied
    Copy To Clipboard
    <table id="table">
      <tr><td>Row 1</td></tr>
      <tr><td>Row 2</td></tr>
      <tr><td>Row 3</td></tr>
    </table>
    example.js
    Copied
    Copy To Clipboard
    $("#table tr:first-child").addClass("highlighted");

    This will add a class named "highlighted" to the first table row, allowing you to apply specific styles.

  4. Chaining Selectors with :first-child:

    You can combine the :first-child selector with other selectors to target more specific elements. For instance, $("#container p:first-child") selects the first paragraph element within the container, ensuring precise targeting.

🎉 Conclusion

The jQuery :first-child selector is a powerful tool for targeting and manipulating the first child element within its parent. Whether you need to style elements, apply classes, or perform other actions specific to the first child, this selector provides a straightforward solution.

By mastering its usage, you can enhance the visual appeal and functionality of your web pages with ease.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy