Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Medium
  • Last Updated : 25 Nov, 2020

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=
        </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 sellect 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:

$(sellector).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=
        </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 sellect 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>

Output:

Before clicking the button:

After clicking the button:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :