:dir()Näennäisluokka CSS mahdollistaa elementtien valittava suunta kielen, määritetty HTML markup. Asiakirjassa voi olla vain kaksi kieltä, jotka voivat liikkua vasemmalta oikealle ja oikealta vasemmalle. Ajattele tätä tapana tyylitellä elementtejä, jotka eroavat toisistaan eri kielisuuntaisuudella.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoluokka hyväksyy vain yhden arvon ja palauttaa nollan, jos syötetään useampi kuin yksi arvo.
Katso Geoff Grahamin (@geoffgraham) kynä: Dir-näennäisvalitsin CodePenistä.
:dir(rtl) vs. (dir=rtl)
Voimme myös valita elementin sen kielisuunnan perusteella tekemällä haun kyselyn valitsimen:
.item(dir=rtl) ( background: red; color: #fff; )Se todella toimii, mutta eroaa siitä :dir(rtl), että se valitsee elementin vain sen perusteella, mikä on tiukasti määritelty HTML-merkinnässä. Kääntöpuolella :dir(rtl)haistaa käyttäjäagentin kieliasetukset ja valitsee elementin ilmoittamatta sitä nimenomaisesti HTML: ssä.
Tämä on iso juttu, koska elementit, joissa ei nimenomaisesti ilmoiteta kielisuuntaa, perivät dirlähimmän esi-isänsä attribuutin, joka sisältää sen. Tämä voi johtaa skenaarioon, jossa käyttämällä (dir=rtl)valitaan muita elementtejä kuin aiot.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| Ei | 17 * | Ei | Ei | Ei |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ei | 85 | Ei | Ei |
Lisää tietoa
- Valitsimet, taso 4
- Chromium-numero # 576815
- WebKit-vika # 64861
- Mozilla-dokumentaatio
- Microsoft Edge -ominaisuuspyyntö
- Chromium-alustan tila
- PostCSS-
:dir()polyfill