Aprovechando el selector :lang de CSS

El selector :lang de CSS nos puede servir, no sólo para darle estilos diferentes a una página según su idioma, sino también a elementos concretos dentro de esa página.


por

En CSS tenemos muchas opciones que sabemos que existen pero a menudo no utilizamos o no se nos ocurre cuando podríamos utilizarlas.

Recientemente me ha pasado con el selector :lang de CSS.

:lang permite aplicar estilos distintos a un elemento mediante CSS según el idioma en el que se muestre la página

Normalmente detecta la declaración en la etiqueta de apertura de HTML, que podemos poner si maquetamos a medida una web, o que ya automáticamente añaden los CMS habituales cómo WordPress:

<html lang="es">

Mediante el selector CSS podemos dar a un mismo elemento estilos diferentes según el idioma en el que estemos:

button:lang(es) {
   background-color: red;
}
button:lang(fr) {
   background-color: blue;
}

En este ejemplo, mostraríamos un botón en concreto con distinto color de fondo en un idioma u otro.

Pero además, lo que hasta ahora no sabía (porque no lo había necesitado utilizar) es que podemos aplicarle el atributo de idioma a un elemento concreto independientemente del idioma general de la página.

Es decir, si en una página en español, con la etiqueta de cabecera <html lang=’es’>, tenemos elementos que se muestran por la razón que sea en inglés y queremos darles un estilo diferenciado, podemos aplicarle el atributo de idioma correspondente:

<ul>
   <li>Elemento normal en castellano</li>
   <li>Elemento normal en castellano</li>
   <li lang='en'>Elemento en inglés</li>
   <li>Elemento normal en castellano</li> 
   <li lang='en'>Elemento en inglés</li>
</ul>

Mediante el uso del atributo ‘lang’ en cualquier elemento de nuestro HTML podremos hacer que se le apliquen los estilos propios para ese idioma:

li:lang(en) { font-style: italic; }

Más información sobre el selector :lang

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA