Den :dir()pseudo klass i CSS tillåter element som ska väljas baserat på riktningen av det språk, som bestäms i HTML-kod. Det finns egentligen bara två riktningar som språket kan flyta i ett dokument, som är från vänster till höger och från höger till vänster. Tänk på detta som ett sätt att utforma element som kännetecknas av olika språkriktning.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoklassen accepterar bara ett enda värde och returnerar null om mer än ett värde anges.
Se Pen: dir pseudo-selector av Geoff Graham (@geoffgraham) på CodePen.
:dir(rtl) mot. (dir=rtl)
Vi kan också välja ett element baserat på dess språkriktning genom att använda en matchningsfrågeväljare:
.item(dir=rtl) ( background: red; color: #fff; )Det fungerar verkligen, men skiljer sig från det :dir(rtl)att det bara väljer ett element genom vad som är strikt definierat i HTML-markeringen. På baksidan :dir(rtl)kommer du att sniffa ut användaragentens språkinställningar och välja elementet utan att uttryckligen anges i HTML.
Detta är en stor sak eftersom element som inte uttryckligen diranger språkriktningen kommer att ärva attributet för sin närmaste förfader som innehåller en. Det kan leda till ett scenario där användning (dir=rtl)väljer ytterligare element än du tänker.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| Nej | 17 * | Nej | Nej | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nej | 85 | Nej | Nej |
Mer information
- Väljare Nivå 4 Specifikation
- Kromutgåva # 576815
- WebKit Bug # 64861
- Mozilla-dokumentation
- Funktionsbegäran från Microsoft Edge
- Chromium-plattformsstatus
- PostCSS
:dir()polyfill