:dir()

The :dir() CSS pseudo-class selector is used to select an element based on its directionality as determined by the document language.

The direction of text in an element can be specified using the CSS direction property. However, the :dir() pseudo-class selector does not match an element whose directionality is solely specified using the direction property—the directionality needs to be specified in the document to match the selector, not in CSS, because :dir() does not select based on stylistic states.

In an HTML5 document, the directionality of an element can be specified using the dir attribute. The directionality can be set to either ltr (left-to-right) or rtl (right-to-left). For example:

<article dir="rtl">
    <!-- ... -->
</article>
                

The :dir() pseudo-class selector takes either rtl or ltr as an argument. The pseudo-class :dir(ltr) represents an element that has a directionality of left-to-right (ltr). The pseudo-class :dir(rtl) represents an element that has a directionality of right-to-left (rtl). Values other than ltr and rtl are not invalid, but do not match anything. (If a future markup specification defines other directionalities, then CSS Selectors may be extended to allow corresponding values.)

The argument to :dir() must be a single identifier, otherwise the selector is invalid. White space is optionally allowed between the identifier and the parentheses.

Trivia & Notes

Because an element’s directionality is set using the dir attribute, the element with a set directionality can also be selected using the attribute selector [dir = ""]. For example:

article[dir="rtl"] {
    /* styles applied to article elements that have a rtl directionality set using the dir attribute */
}
                

The usage of :dir() is not equivalent to the usage of the [dir = ""] selector.

The [dir = ""] attribute selector only performs a comparison against a given attribute on the element. This means that it will match an element only if it has the dir attribute set. It will not match an element that does not have the dir attribute set, even if the element has a certain directionality specified elsewhere in the document. Moreover, if the dir attribute has a value auto, it will match neither [dir = "ltr"] nor [dir = "rtl"].

The :dir() pseudo-class selector, on the other hand, will match an element even if its directionality is inherited from its closest ancestor with a valid dir attribute. Also, an element that matches that has dir = "auto" will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents.