:dir() is a pseudo-class that selects elements based on the direction of the text within those elements.


The :dir() pseudo-class enables you to select elements based on the direction of the element as specified by the semantic direction: of the document itself. It does not take into account the styled direction, i.e. set by CSS rules, such as direction.

Be aware that the pseudo-class :dir() is not equivalent to selecting by attribute [dir=…]. The latter only applies to HTML elements that have the attribute dir, ignoring those that don’t have it — even if they inherited its value. :dir() on the other hand matches the value given by the User Agent, even if it’s inherited.


/* Selects all elements with right-to-left text */

:dir(rtl) {
   background-color: #f3f3f3;

/* Selects all elements with left-to-right text */

:dir(ltr) {
   background-color: #f3f3f3;

Browser Support


Data on support for the css-dir-pseudo feature across the major browsers from caniuse.com