:dir()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since декабÑÑ 2023 г..
ÐкÑпеÑименÑалÑÐ½Ð°Ñ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑ: ÐÑо ÑкÑпеÑименÑалÑÐ½Ð°Ñ ÑеÑ
нологиÑ
Так как ÑпеÑиÑикаÑÐ¸Ñ ÑÑой ÑеÑ
нологии еÑÑ Ð½Ðµ ÑÑабилизиÑовалаÑÑ, ÑмоÑÑиÑе ÑаблиÑÑ ÑовмеÑÑимоÑÑи по Ð¿Ð¾Ð²Ð¾Ð´Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð² ÑазлиÑнÑÑ
бÑаÑзеÑаÑ
. Также замеÑÑÑе, ÑÑо ÑинÑакÑÐ¸Ñ Ð¸ поведение ÑкÑпеÑименÑалÑной ÑеÑ
нологии Ð¼Ð¾Ð¶ÐµÑ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑÑÑ Ð² бÑдÑÑиÑ
веÑÑиÑÑ
бÑаÑзеÑов, вÑлед за изменениÑми ÑпеÑиÑикаÑии.
:dir() â ÑÑо пÑевдоклаÑÑ CSS, коÑоÑÑй вÑбиÑÐ°ÐµÑ ÑлеменÑÑ Ð½Ð° оÑнове напÑÐ°Ð²Ð»ÐµÐ½Ð¸Ñ ÑекÑÑа в ниÑ
.
/* ÐÑбиÑÐ°ÐµÑ Ð²Ñе ÑлеменÑÑ Ñ ÑекÑÑом ÑпÑава-налево */
:dir(rtl) {
background-color: red;
}
:dir() ÑÑиÑÑÐ²Ð°ÐµÑ ÑолÑко ÑеманÑиÑеÑкое напÑавление, Ñ.е. заданное в Ñамом докÑменÑе. Ðн не ÑÑиÑÑÐ²Ð°ÐµÑ ÑÑилизованное напÑавление, Ñ.е. заданное CSS-пÑавилами, напÑÐ¸Ð¼ÐµÑ direction.
ÐÑимеÑание:
ÐомниÑе о Ñом, ÑÑо пÑевдоклаÑÑ :dir() не ÑквиваленÑен вÑбоÑÑ Ð¿Ð¾ аÑÑибÑÑÑ [dir=â¦]. ÐоÑледний пÑименÑеÑÑÑ ÑолÑко к Ñем ÑлеменÑам HTML, Ñ ÐºÐ¾ÑоÑÑÑ
еÑÑÑ Ð°ÑÑибÑÑ dir, игноÑиÑÑÑ Ñе, Ñ ÐºÐ¾ÑоÑÑÑ
он не задан â даже еÑли они ÑнаÑледовали его знаÑение. (ÐоÑ
ожим обÑазом [dir=rtl] и [dir=ltr] не бÑдÑÑ Ð²ÐºÐ»ÑÑаÑÑ auto.) :dir(), же, напÑоÑив, ÑооÑвеÑÑÑвÑÐµÑ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ñ Ð²ÑÑиÑÐ»ÐµÐ½Ð½Ð¾Ð¼Ñ user agent, даже ÑнаÑледованномÑ.
ÐÑимеÑание:
Ð HTML, напÑавление задаÑÑÑÑ Ð°ÑÑибÑÑом dir. РдÑÑгиÑ
ÑоÑмаÑаÑ
могÑÑ Ð¸ÑполÑзоваÑÑÑÑ Ð¸Ð½Ñе меÑодÑ.
СинÑакÑиÑ
:dir() ÑÑебÑÐµÑ Ð¾Ð´Ð½Ð¾Ð³Ð¾ паÑамеÑÑа, пÑедÑÑавлÑÑÑего желаемое напÑавление.
Parameters
Formal syntax
Error: could not find syntax for this itemÐÑимеÑ
HTML
<div dir="rtl">
<span>test1</span>
<div dir="ltr">
test2
<div dir="auto">×¢Ö´×ְרִ×ת</div>
</div>
</div>
CSS
:dir(ltr) {
background-color: yellow;
}
:dir(rtl) {
background-color: powderblue;
}
Result
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |