: 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.
|
1 2 3 4 5 6 7 |
: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:
|
1 2 3 4 5 6 7 8 9 |
:root { background-color: #009966; /* smooth the color transition */ transition: background-color .6s; } :root:hover { background-color: #0099ff } |