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