The :rootpemilih memungkinkan Anda untuk menargetkan tingkat tertinggi “orang tua” elemen dalam DOM, atau pohon dokumen. Ini didefinisikan dalam spesifikasi CSS Selectors Level 3 sebagai "struktural pseudo-class", yang berarti digunakan untuk mengatur gaya konten berdasarkan hubungannya dengan konten induk dan saudara.
Dalam sebagian besar kasus yang mungkin Anda temui, :rootmengacu pada elemen di halaman web. Dalam dokumen HTML, htmlelemen akan selalu menjadi induk tingkat tertinggi, sehingga perilaku :rootdapat diprediksi. Namun, karena CSS adalah bahasa gaya yang dapat digunakan dengan format dokumen lain, seperti SVG dan XML, :rootpseudo-class dapat merujuk ke elemen berbeda dalam kasus tersebut. Terlepas dari bahasa markup, :rootakan selalu memilih elemen dokumen paling atas di pohon dokumen.
Pada contoh di bawah ini, :rootselektor pseudo-class digunakan untuk membuat warna latar belakang di belakang elemen. Dalam kasus ini, efek yang sama dapat dicapai dengan menggunakan htmlpemilih elemen di CSS kita.
Tempat Menarik
- Meskipun
:rootselektor danhtmlpemilih menargetkan elemen HTML yang sama, mungkin berguna untuk mengetahui bahwa:rootsebenarnya memiliki kekhususan yang lebih tinggi. Pemilih kelas semu (tetapi bukan elemen semu) memiliki kekhususan yang sama dengan kelas, yang lebih tinggi dari pemilih elemen dasar.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| ya | ya | ya | 9,5+ | IE9 + | ya | ya |