Clase pseudo CSS :dir()

La pseudo-clase :dir() coincide con los elementos que se basan en la direccionalidad del texto que contienen.

La pseudo-clase :dir() no selecciona basándose en estados de estilo, por lo que la direccionalidad de un elemento debe especificarse en el documento.

En HTML5, la direccionalidad de un elemento puede especificarse utilizando el atributo dir.

El selector :dir() puede tener los valores "ltr" o "rtl".

La pseudo-clase :dir(ltr) coincide con los elementos que tienen una direccionalidad de izquierda a derecha. La pseudo-clase :dir(rtl) coincide con los elementos que tienen una direccionalidad de derecha a izquierda. Otros valores no son válidos.

:dir(rtl) vs. `[dir=rtl]`

Existe una diferencia entre :dir(rtl) y [dir=rtl]. [dir=rtl] solo selecciona un elemento si el atributo está estrictamente definido en el marcado HTML. :dir(rtl) selecciona el elemento incluso si la direccionalidad no se indica explícitamente en HTML. Los elementos sin una dirección explícita heredan el atributo dir de su ancestro más cercano que lo contenga. En estos casos, [dir=rtl] no coincide con los elementos heredados, mientras que :dir(rtl) sí lo hace.

Versión

Selectors Level 4

Sintaxis

Sintaxis de CSS :dir()

css

:dir(ltr) {
  css declarations
}

Ejemplo del selector :dir():

Ejemplo de código CSS :dir()

html

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

Try it Yourself »

nota
Esta pseudo-clase es compatible con todos los navegadores modernos, incluidos Chrome, Edge, Safari y Firefox.

Práctica

¿Cuál es el propósito de la propiedad 'dir' en CSS?

Permite al usuario especificar la dirección del texto.Cambia el color de fondo del texto.Se utiliza para alinear el texto.Puede decidir si el texto debe renderizarse de derecha a izquierda o de izquierda a derecha.

Clase pseudo CSS :dir() ​

:dir(rtl) vs. [dir=rtl] ​

Versión ​

Sintaxis ​