Cara Menggunakan Pseudo-class root pada CSS

: root adalah pemilih pseudo-class CSS yang digunakan untuk memilih elemen yang mewakili akar dokumen.

Dalam HTML4, ini selalu elemen <html>, karena ini adalah leluhur level tertinggi dari semua elemen lain di halaman. Jadi,: root identik dengan menggunakan html sebagai pemilih, kecuali bahwa ia memiliki kekhususan yang lebih tinggi.

Ini berarti bahwa, dalam contoh berikut, gaya yang ditentukan menggunakan: root akan menimpa yang ditentukan menggunakan pemilih html, bahkan jika yang terakhir datang berikutnya dalam lembar gaya.

:root {
    /* style the root element */
}

html {
    /* style the root element */
}

Dalam format dokumen selain HTML, seperti SVG dan XML, class: root pseudo dapat merujuk ke leluhur tingkat yang lebih tinggi.

Sama seperti penyeleksi pseudo-class lainnya, pemilih: root dapat dirantai dengan penyeleksi lain seperti: hover dan pseudo-elements seperti :: after, misalnya, untuk menyediakan gaya hover untuk elemen root di berbagai negara. Misalnya, yang berikut ini akan mengubah warna latar belakang elemen root saat di-hover:

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}