How to apply css property to a child element using JQuery?

Last Updated : 23 Sep, 2021

The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery.

Syntax:

// Note : children method selects the direct child to parent
$(selector).children("selector").css("property-name","value")

Example 1

HTML

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

    <head>
        <meta charset="utf-8">

        <title>
            How to apply CSS property to a 
            child element using JQuery?
        </title>

        <!-- Link of JQuery cdn -->
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        </script>
    </head>

    <body>
        <div class="parent">
            <h2 class="child-1">i am child-1.</h2>
            <p class="child-2">i am child-2.</p>


        </div>

        <button>Apply css</button>

        <script>
            $("button").click(function () {

                // select div element which is the parent
                // select first child(h2) and apply one 
                // or more css property at a time
                $("div").children("h2").css({ 
                    "backgroundColor": "black", "color": "white" });

                // apply one property at a time, use 
                // property name just like css and 
                // then select second child element(p)
                $("div").children("p").css("background-color", "red");
                $("div").children("p").css("color", "white");
            });
        </script>
    </body>

    </html>

Output:

Before Clicking the Button:

After Clicking the Button:

We can also apply CSS property to grand-child and any descendants to parent with the help of find() method in jQuery.

Syntax:

$(selector).find("descendants-name").css("property-name","value");

Example 2:

HTML

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

    <head>
        <meta charset="utf-8">
        <title>
            How to apply CSS property to a 
            child element using JQuery?
        </title>

        <!-- Link of JQuery cdn -->
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        </script>
    </head>

    <body>
        <div class="parent">
            <h2 class="child-1">i am child-1.</h2>
            <p class="child-2">i am child-2.
                <span>i am grand-child-1</span>
            </p>


        </div>

        <button>Apply css</button>

        <script>
            $("button").click(function () {

                // select div element which is the parent
                // select first child(h2) and apply one 
                // or more css property at a time
                $("div").find("h2").css({
                    "backgroundColor": "black",
                    "color": "white"
                });

                // Apply one property at a time, use
                // property name just like css
                // and then select second child element(p)
                $("div").find("p").css("background-color", "red");
                $("div").find("p").css("color", "white");

                // Apply on grand-child
                $("div").find("span").css({
                    "backgroundColor": "black",
                    "color": "white"
                });
            });
        </script>
    </body>

    </html>