Den :dir()pseudo-klasse i CSS tillader elementer, der skal vælges baseret på retningen af sproget, som bestemt i HTML markup. Der er virkelig kun to retninger, som sprog kan flyde i et dokument, som er fra venstre mod højre og højre mod venstre. Tænk på dette som en måde at style elementer, der er kendetegnet ved forskellige sprogretning.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoklassen accepterer kun en enkelt værdi og returnerer nul, hvis der er indtastet mere end en værdi.
Se pennen: dir pseudovælger af Geoff Graham (@geoffgraham) på CodePen.
:dir(rtl) vs. (dir=rtl)
Vi kan også vælge et element baseret på dets sprogretning ved at bruge en match-forespørgselvælger:
.item(dir=rtl) ( background: red; color: #fff; )Det virker faktisk, men er forskelligt fra :dir(rtl), at det kun vælger et element ved det, der er strengt defineret i HTML-markeringen. På bagsiden :dir(rtl)vil snuse brugeragentens sprogindstillinger og vælge elementet uden at være udtrykkeligt angivet i HTML.
Dette er en big deal, fordi elementer, der ikke udtrykkeligt angiver sprogretningen, vil arve dirattributten til dens nærmeste forfader, der indeholder en. Det kan føre til et scenarie, hvor brug (dir=rtl)vælger yderligere elementer, end du har til hensigt.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Ingen | 17 * | Ingen | Ingen | Ingen |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ingen | 85 | Ingen | Ingen |
Mere information
- Selectors Level 4 Specification
- Chrom-udgave # 576815
- WebKit Bug # 64861
- Mozilla-dokumentation
- Microsoft Edge-funktionsanmodning
- Chromium-platformstatus
- PostCSS
:dir()polyfill