The :root selector matches the document root element — exactly one node. In HTML, official jQuery docs say it is always the <html> element. Available since jQuery 1.9; also valid standard CSS.
:root
Document top
nodeName demo
Same in HTML
Variables
querySelector
Every HTML page is a tree of nested elements. At the very top sits one root node — for HTML documents, that is the <html> element. jQuery’s :root pseudo-class selects that single root element, no matter how deep your page content grows.
Added in jQuery 1.9, :root aligns with the standard CSS :root pseudo-class. The official demo reads $(":root")[0].nodeName and displays it — typically HTML in uppercase for HTML documents.
Think of :root as “give me the top of the document tree”:
$(":root") → exactly one element — the document root.$("html") and document.documentElement.:root { --color: blue; } sets variables on that same element.Most day-to-day jQuery code uses $("html") or $(document.documentElement). Reach for :root when you want the semantic “document root” name — especially in code shared across HTML and XML contexts.
Official jQuery API form (since 1.9):
jQuery( ":root" )
// read the root tag name:
$( ":root" )[ 0 ].nodeName
// HTML equivalent selectors:
$( "html" )
$( document.documentElement )
// native CSS (standard):
document.querySelector( ":root" )$( "<span>" )
.html( $( ":root" )[ 0 ].nodeName )
.appendTo( "#log" );| Selector / API | HTML document | Match count |
|---|---|---|
$(":root") | <html> | 1 |
$("html") | <html> | 1 |
document.documentElement | <html> | 1 node |
document.querySelector(":root") | <html> | 1 (native CSS) |
$("body") | <body> | 1 (not root) |
:root vs html and bodyDocument root vs common page containers.
:rootDocument root (1)
htmlSame node in HTML
bodyPage content host
document.documentElementNative DOM API
Example 1 follows the official jQuery :root demo. Examples 2–5 cover match count, comparison with html, setting root attributes, and native querySelector.
Display the root element’s tag name.
nodeNameOfficial jQuery demo — append a span showing the root tag name to #log.
$( "<span>" )
.html( $( ":root" )[ 0 ].nodeName )
.appendTo( "#log" );$(":root")[0] is the DOM node; .nodeName returns HTML for HTML documents.
Verify that :root always returns a single-element jQuery collection.
console.log( ":root length →", $( ":root" ).length );
console.log( "tagName →", $( ":root" )[ 0 ].tagName );Unlike list or form selectors, :root never matches zero or many — always exactly one root node.
Compare selectors, set attributes, and use native APIs.
:root vs htmlConfirm both selectors reference the same DOM node in HTML documents.
var same = $( ":root" )[ 0 ] === $( "html" )[ 0 ];
console.log( "Same element?", same );In HTML, :root and html resolve to document.documentElement.
lang on the RootUpdate the document language attribute through :root — affects accessibility and translation tools.
$( ":root" ).attr( "lang", "en-US" );
$( "#langOut" ).text( "Root lang → " + $( ":root" ).attr( "lang" ) );Because :root is the html element, attribute changes apply document-wide.
querySelector(":root")Unlike many jQuery extensions, :root is standard CSS — use it without jQuery when needed.
var root = document.querySelector( ":root" );
console.log( root === document.documentElement ); // true in HTML
// CSS custom properties often target :root in stylesheets:
// :root { --brand: #2563eb; }CSS authors use :root for design tokens; jQuery uses the same selector to reach that node in script.
lang or dir on :root.data-theme on the root for CSS variable switching.nodeName in embedded or XML contexts.no-js / js class on root (often done at load).:root { --token: value; } patterns in jQuery scripts.:rootRecognize the :root pseudo-class — no prefix or argument needed.
Use the active document’s top-level element — not scoped to a subtree.
In HTML, that node is document.documentElement (<html>).
Chain .attr(), .addClass(), or read [0].nodeName.
html element (official jQuery docs).querySelector(":root").body — body is a child of the root.input type="reset" — that uses the :reset selector instead.The :root pseudo-class is standard CSS and works in jQuery 1.9+. Native document.querySelector(":root") is supported in all modern browsers — it returns the same node as document.documentElement in HTML.
Document root — html in HTML pages; native querySelector supported.
Bottom line: One match only; in HTML equals $('html') and document.documentElement.
The :root selector matches the single document root — in HTML, the <html> element. The official demo displays its nodeName.
Use it when you want the semantic document root; in everyday HTML pages, $("html") is equally valid.
:root for document-wide lang or theme attributes:root { --var: ...; } for design tokensquerySelector(":root") when jQuery is not loaded:root with :reset (form button)body$(":root") will iterate many nodes$("html") without reason — both work in HTMLOne node — top of the tree.
Doc top
APIAlways
RuleSame node
TipNative OK
ComparenodeName
DemoCSS authors declare global design tokens with :root { --primary: #2563eb; } because custom properties inherit from the root. jQuery’s $(":root") targets that same html node — so you can read or update attributes in script while variables live in CSS on the identical element.
Learn how to select the element referenced by the URL hash fragment.
6 people found this page helpful