Multilingual Sites: Styling translated text

Ire Aderinokun on why you should use the :lang pseudo-class over the lang attribute selector (e.g. [lang]) for language-specific styles:

The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector.

This can become a problem if we have a document with multiple, nested elements of different languages. Let’s take this section below. The section has a French lang attribute but, within the section, we have a quote in Spanish.

<section lang="fr">
    <p>Comment dites-vous "Bonjour" en Espanol?</p>
    <blockquote lang="es">
        <p>Hola!</p>
    </blockquote>
</section>

If one were to be styling based on the lang attribute, the styling would only work nice if the order of the CSS declarations was the same as the order in which the different languages appear in the markup. Flip your CSS around, and the styling will be wrong.

The fix is to use the :lang pseudo-class, a selector whose use wasn’t very clear to me … up until now 😉

Use the :lang pseudo-class over the lang attribute selector for language-specific styles →