Clase pseudo CSS :lang()

La clase pseudo :lang() coincide con un elemento en función del idioma en el que se determina que está.

Cualquier idioma determinado en HTML utiliza una combinación del atributo lang (por ejemplo, <html lang="it">), la etiqueta <meta> y la información del protocolo (por ejemplo, encabezados HTTP).

El valor del atributo lang es un código de idioma de dos letras, como lang="it" para italiano, o dos códigos de idioma combinados, como lang="fr-ca" para francés canadiense.

Usando el selector :lang(), se puede utilizar el tipo de comillas para las citas en una página.

Versión

CSS Selectors

CSS Selectors Level 3

Sintaxis

Sintaxis de CSS :lang()

css

:lang() {
  css declarations;
}

Ejemplo del selector lang() con el valor "fr" para francés:

Ejemplo de código CSS :lang()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:lang(fr) {
        background: #1c87c9;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <p>I am from France.</p>
    <p lang="fr">Je m'appelle Ann</p>
  </body>
</html>

Try it Yourself »

En el siguiente ejemplo, la clase pseudo :lang() se utiliza para coincidir con los padres de los elementos de cita usando combinadores de hijos.

Ejemplo del selector :lang() usando combinadores de hijos.

Otro ejemplo de código CSS :lang()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :lang(en) > q {
        quotes: '\201C' '\201D' '\2018' '\2019';
      }
      :lang(fr) > q {
        quotes: '« ' ' »';
      }
    </style>
  </head>
  <body>
    <h2>:lang() selector example</h2>
    <div lang="en">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
    <div lang="fr">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
  </body>
</html>

Try it Yourself »

Práctica

¿Qué hace la clase pseudo :lang en CSS?

Te permite seleccionar elementos con un atributo de idioma específico.Te permite dar estilo al texto en un idioma específico.Te permite traducir texto de un idioma a otro.Te permite aplicar diferentes estilos a diferentes partes del texto.Cambia el idioma del texto.

Clase pseudo CSS :lang() ​

Versión ​

Sintaxis ​

Ejemplo del selector lang() con el valor "fr" para francés: ​