jQuery :root Selector

Quiz

The :root selector in jQuery is used to select the root element of the document, i.e. the "<html> element.

Syntax

Following is the syntax of :root selector in jQuery −

$(":root")

Parameters

Following are the parameters of this method −

":root" − This selector selects the root element of the document.

Example 1

In the following example, we are demonstrating how to change the background color of the root element of the document using the jQuery :root selector −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":root").css("background-color", "lightblue");
        });
    </script>
</head>
<body>
    <p>This example changes the background color of the root element.</p>
</body>
</html>

After executing the above program, the root element of the document (<html>) will be highlighted with lightblue background color.

Example 2

In this example, we are demonstrating how to add a border to all elements within the root element using the jQuery :root selector −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":root *").css("border", "1px solid red");
        });
    </script>
</head>
<body>
    <p>This example adds a border to all elements within the root.</p>
    <div>
        <p>Nested paragraph inside a div.</p>
    </div>
</body>
</html>

When we execute the above program, the all elements within the root element will be highlighted with solid red borders.

jquery_ref_selectors.htm

Print Page