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_lang/index.html | 101 ++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/es/web/css/_colon_lang/index.html (limited to 'files/es/web/css/_colon_lang') diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..46bfc7609e --- /dev/null +++ b/files/es/web/css/_colon_lang/index.html @@ -0,0 +1,101 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-clase + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-clase :lang() de CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.

+ +
/* Selecciona cualquier <p> en inglés (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Nota: En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.

+
+ +

Sintaxis

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Parámetro

+ +
+
<language-code>
+
Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML.
+
+ +

Ejemplo

+ +

En este ejemplo, la pseudo-clase :lang() se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando selectores de hijo. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.

+ +

HTML

+ +
<div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 350)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Ningún cambio significativo.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

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

+
+ +

Ver también

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