Kelas :dir()semu di CSS memungkinkan elemen untuk dipilih berdasarkan arah bahasa, sebagaimana ditentukan dalam markup HTML. Hanya ada dua arah bahasa yang dapat mengalir dalam dokumen, yaitu kiri ke kanan dan kanan ke kiri. Pikirkan ini sebagai cara untuk memberi gaya pada elemen yang dibedakan oleh arah bahasa yang berbeda.
.item:dir(rtl) ( background: red; color: #fff; )Kelas pseudo hanya menerima satu nilai dan akan mengembalikan nol jika lebih dari satu nilai dimasukkan.
Lihat Pen: dir pseudo-selector oleh Geoff Graham (@geoffgraham) di CodePen.
:dir(rtl) vs. (dir=rtl)
Kita juga dapat memilih elemen berdasarkan arah bahasanya dengan menggunakan pemilih kueri pencocokan:
.item(dir=rtl) ( background: red; color: #fff; )Itu memang berfungsi, tetapi berbeda dari :dir(rtl)itu hanya memilih elemen dengan apa yang didefinisikan secara ketat dalam markup HTML. Di sisi lain, :dir(rtl)akan mengendus preferensi bahasa agen pengguna dan memilih elemen tanpa dinyatakan secara eksplisit dalam HTML.
Ini masalah besar karena elemen yang tidak secara eksplisit menyatakan arah bahasa akan mewarisi diratribut dari leluhur terdekat yang berisi satu. Itu bisa mengarah ke skenario di mana menggunakan (dir=rtl)memilih elemen tambahan dari yang Anda inginkan.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| Tidak | 17 * | Tidak | Tidak | Tidak |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Tidak | 85 | Tidak | Tidak |
Informasi Lebih Lanjut
- Spesifikasi Selektor Level 4
- Masalah Chromium # 576815
- Bug WebKit # 64861
- Dokumentasi Mozilla
- Permintaan Fitur Microsoft Edge
- Status Platform Chromium
- PostCSS
:dir()polyfill