← Back to release summary

CSS :dir() pseudo-class selector

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 120)
Intent stage
Prepare to ship

WPT details: WPT test plan (somewhat out of date, since recent CLs have added many tests) at https://github.com/web-platform-tests/wpt/issues/25569 Existing tests have names starting with "dir" in https://wpt.fyi/results/css/selectors and https://wpt.fyi/results/html/dom/elements/global-attributes PR for testing shadow DOM interaction at https://github.com/web-platform-tests/wpt/pull/29820 which will add additional tests

Summary

The :dir() CSS pseudo-class selector matches elements based on directionality, which is determined based on the HTML dir attribute. :dir(ltr) matches left-to-right text directionality, and :dir(rtl) matches elements with right-to-left text directionality. It is not equivalent to [dir] attribute selectors because it matches against directions inherited from an ancestor with the dir attribute, and because it matches against the direction computed from use of dir=auto (which determines directionality from the first character in the text with strong directionality).

Standards & signals

Ecosystem

Samples: https://jsfiddle.net/fxc9a8uc/1

View on chromestatus.com