Met de :dir()pseudo-klasse in CSS kunnen elementen worden geselecteerd op basis van de richting van de taal, zoals bepaald in de HTML-opmaak. Er zijn eigenlijk maar twee richtingen waarin taal in een document kan stromen, namelijk van links naar rechts en van rechts naar links. Beschouw dit als een manier om elementen te stylen die zich onderscheiden door verschillende taalgerichtheid.
.item:dir(rtl) ( background: red; color: #fff; )De pseudo-klasse accepteert slechts één waarde en retourneert null als er meer dan één waarde wordt ingevoerd.
Zie de Pen: dir pseudo-selector door Geoff Graham (@geoffgraham) op CodePen.
:dir(rtl) vs. (dir=rtl)
We kunnen ook een element selecteren op basis van de taalrichting door een matchquery-selector te gebruiken:
.item(dir=rtl) ( background: red; color: #fff; )Dat werkt inderdaad, maar is anders :dir(rtl)doordat het alleen een element selecteert op basis van wat strikt is gedefinieerd in de HTML-opmaak. Aan de andere kant :dir(rtl)snuift het de taalvoorkeuren van de user-agent op en selecteert het element zonder expliciet in de HTML te worden vermeld.
Dit is een groot probleem, omdat elementen die niet expliciet de taalrichting aangeven, het dirattribuut erven van de dichtstbijzijnde voorouder die er een bevat. Dat kan leiden tot een scenario waarin het gebruik (dir=rtl)extra elementen selecteert dan u van plan was.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| Nee | 17 * | Nee | Nee | Nee |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nee | 85 | Nee | Nee |
Meer informatie
- Selectors Level 4 Specificatie
- Chromium-probleem # 576815
- WebKit-bug # 64861
- Mozilla-documentatie
- Microsoft Edge-functieverzoek
- Chromium-platformstatus
- PostCSS
:dir()polyfill