HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>native root selector</title>
  <style>
    :root { --brand: #2563eb; }
    body { font-family: sans-serif; padding: 16px; color: var(--brand); }
    #output { padding: 12px; border: 2px solid var(--brand); margin-top: 12px; }
  </style>
</head>
<body>
  <p>Text uses --brand from CSS :root.</p>
  <div id="output"></div>
  <script>
    var root = document.querySelector(":root");
    document.getElementById("output").textContent =
      "querySelector(':root') === document.documentElement → " +
      (root === document.documentElement);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Native querySelector(':root') (Try It)