From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_dir/index.html | 108 +++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/es/web/css/_colon_dir/index.html (limited to 'files/es/web/css/_colon_dir') diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..b39c21888a --- /dev/null +++ b/files/es/web/css/_colon_dir/index.html @@ -0,0 +1,108 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

+ +
/* Selecciona cualquier elemento con texto de derecha a izquierda */
+:dir(rtl) {
+  background-color: red;
+}
+ +

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.

+ +
+

Nota: Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.

+
+ +
+

Nota: En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.

+
+ +

Sintaxis

+ +

La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

+ +

Parámetros

+ +
+
ltr
+
Orientar elementos de izquierda a derecha.
+
rtl
+
Orientar elementos de derecha a izquierda.
+
+

Sintaxis formal

+ + 
{{csssyntax}}
+
+
+
+ +

Ejemplo

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Ejemplo') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.dir")}}

+ +
 
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf