jQuery селектор :root

Определение и применение

jQuery селектор :root выбирает корневой элемент в документе, в HTML корневым элементом всегда является элемент <html>.

jQuery синтаксис:

JavaScript

$(":root")

Добавлен в версии jQuery

1.9

Селектор в CSS

CSS псевдокласс :root.

Пример использования

Селектор :root — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // запускаем функцию при клике
        $(':root').css('background-color', 'yellow') // устанавливаем фон для корневого элемента
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :root мы выбрали и стилизовали корневой элемент.