The jQuery :root selector is used to select the root element of the HTML document.
Syntax:
$(":root")Parameter: This selector contains single parameter root which is the root element of document.
Example 1: This example use :root selector to select document and set background-color to green.
<html>
<head>
<title>
jQuery :root Selector
title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
script>
head>
<body style="text-align:center;">
<h1>GeeksForGeeksh1>
<h2>jQuery :root Selectorh2>
<script>
$(document).ready(function () {
$(":root").css("background-color", "green");
});
script>
body>
html>
Output:
Example 2: This example use :root selector to select document and change text color to red.
<html>
<head>
<title>
jQuery :root Selector
title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
script>
head>
<body style="text-align:center;">
<h1>GeeksForGeeksh1>
<h2>jQuery :root Selectorh2>
<button>Change colorbutton>
<script>
$(document).ready(function () {
$("button").click(function () {
$(":root").css("color", "red");
});
});
script>
body>
html>
Output:
