I :dir()pseudoklassen i CSS kan du velge elementer basert på språkretningen, som bestemt i HTML-markeringen. Det er egentlig bare to retninger som språket kan flyte i et dokument, som er fra venstre til høyre og høyre mot venstre. Tenk på dette som en måte å utforme elementer som er preget av forskjellige språkretning.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoklassen godtar bare en enkelt verdi og vil returnere null hvis mer enn en verdi er angitt.
Se pennen: dir pseudo-selector av Geoff Graham (@geoffgraham) på CodePen.
:dir(rtl) vs. (dir=rtl)
Vi kan også velge et element basert på språkretningen ved å lage en søkeordvelger:
.item(dir=rtl) ( background: red; color: #fff; )Det fungerer faktisk, men er forskjellig fra :dir(rtl)ved at det bare velger et element etter det som er strengt definert i HTML-markeringen. På baksiden :dir(rtl)vil snuse ut brukeragentens språkinnstillinger og velge elementet uten å være eksplisitt oppgitt i HTML-en.
Dette er en stor sak fordi elementer som ikke eksplisitt angir språkretningen, vil arve dirattributtet til sin nærmeste forfader som inneholder en. Det kan føre til et scenario der bruk (dir=rtl)velger flere elementer enn du har tenkt.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| Nei | 17 * | Nei | Nei | Nei |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nei | 85 | Nei | Nei |
Mer informasjon
- Selectors nivå 4 spesifikasjon
- Kromutgave # 576815
- WebKit Bug # 64861
- Mozilla-dokumentasjon
- Microsoft Edge Feature Request
- Chromium-plattformsstatus
- PostCSS
:dir()polyfill