Pseudo-clases (IV) en CSS :lang
La pseudo-clase de lenguaje, :lang es la última de las pseudo-clases disponibles en CSS2, sirve para asignar diferentes reglas a idiomas distintos.
Cuando hablamos de idiomas en este contexto, nos refererimos a idiomas humanos, como el español, el ingles o el frances. No a lenguajes de programación. Al menos si queremos ser respetuosos con el estandar.
Bien, el idioma en el que estamos usando, se define mediante el atributo lang de HTML, y es costumbre usarlo para todo el documento en conjunto, así:
-
<html lang="es">
o para un elemento en particular
-
<p lang="es">
El valor del atributo lang son siempre dos letras que especifican el código de idioma, la lista de códigos de idioma es extensa, así que no voy a reproducirla al completo, si te interesa puedes consultar la norma ISO 639
Si nuestra web hace uso de distintos idiomas, como por ejemplo, una página que ofrezca traducciones letras de canciones puede ser que queramos aplicar reglas distintas a cada idioma.
Veamos como con una bonita canción de Louis Armstrong.
el marcado:
-
<div lang="en">
-
<h1>What a wonderful world</h1>
-
I see trees of green, red roses too
-
I see them bloom for me and you
-
And I think to myself what a wonderful world.
-
-
I see skies of blue and clouds of white
-
The bright blessed day, the dark sacred night...
-
And I think to myself what a wonderful world.
-
-
The colors of the rainbow so pretty in the sky
-
Are also on the faces of people going by
-
I see friends shaking hands saying "how do you do?"
-
They´re really saying I love you.
-
-
I hear babies crying, I watch them grow
-
They´ll learn much more than I´ll never know...
-
And I think to myself what a wonderful world
-
Yes I think to myself what a wonderful world.
-
</pre>
-
</div>
-
-
<div lang="es">
-
<h1>Que mundo maravilloso</h1>
-
Yo veo árboles verdes, rosas rojas también
-
Las veo florecer para mi y para ti
-
Y pienso para mi mismo, Qué mundo maravilloso
-
-
Veo cielos azules y nubes blancas
-
El brillo de un día bendito, la oscuridad de la noche sagrada
-
Y pienso para mi mismo, Qué mundo maravilloso
-
-
Los colores del arco iris, tan lindos en el cielo
-
También están en las caras de la gente que pasa
-
Veo amigos estrechando sus manos, diciendo "Cómo te va?"
-
Realmente ellos dicen Yo te quiero
-
-
Escucho bebés llorar, los veo crecer
-
Ellos aprenderán mucho mas de lo que yo jamás sabré
-
Y pienso para mi mismo, Qué mundo maravilloso
-
Si pienso para mi mismo, Qué mundo maravilloso
-
</pre>
-
</div>
el estilo
-
div{
-
float:left;
-
margin:0 20px;
-
}
-
-
div:lang(es){
-
font-style:italic;
-
}
La primera regla, simplemente trata de situar una capa junto a la otra, el meollo de la cuestión esta en div:lang(es), mediante la cual accedemos a todas las capas div cuyo atributo lang este definido a es (español)
Si quieres, puedes ver como queda este ejemplo terminado
Problemas con Internet Explorer
En el artículo sobre :hover, :active y :focus ya comentamos que IE ignora todas las pseudo-clases que no se apliquen a un enlace, asi que esta no iba a ser una excepción.