This is an important message requiring you to make a choice if you're based in the EU.

CSS :dir() Pseudo Class

The :dir() pseudo-class matches elements that are based on the directionality of the text contained in them.

The :dir() does not select based on stylistic states that is why the directionality of an element needs to be specified in the document.

In a HTML5, the directionality of an element can be specified using the dir attribute.

The :dir() selector takes either "rtl" or "ltr" values.




:dir() {
css declarations


<!DOCTYPE html>
    <title>Title of the document</title>
      div:dir(ltr) {
      background-color: #1c87c9;
      div:dir(rtl) {
      background-color: #8ebf42;
    <h2>:dir() selector example</h2>
    <div dir="rtl">
      <div dir="ltr">
        <div dir="auto"> ففي </div>

In order to see the effect use Firefox because this pseudo-class works only on Mozzila Firefox.

Browser support

x x 49.0+
17.0 - 48.0 -moz-
x x

Practice Your Knowledge

Which statement below is incorrect?

Do you find this helpful?

Related articles