CSS :lang

The :lang() selector in CSS is used to select elements based on the language attribute of the element. It allows you to style elements based on the language specified in the lang attribute of the HTML element. This can be useful for styling multilingual websites or applying different styling based on the language of the content.

To use the :lang() selector, you need to specify the language code inside the parentheses. Here is the basic syntax:

:lang(language-code) {
  /* CSS styles here */
}

Let's see an example to better understand how the :lang() selector works.

:lang(en) {
  color: blue;
}

:lang(es) {
  color: red;
  }

<p lang="en">This is a paragraph in English 🇺🇸</p>
<p lang="es">Este es un párrafo en Español 🇪🇸</p>

In the example above, we have two paragraphs, one in English and one in Spanish. We can use the :lang() selector to style these paragraphs differently based on the language attribute.

After applying the CSS styles above, the English paragraph will be displayed in blue, and the Spanish paragraph will be displayed in red.

You can also use the :lang() selector to select elements with a specific language and apply different styles to them based on the language code. This can be particularly useful for styling headings, links, or any other content based on language.

Experiment with the :lang() selector in your CSS stylesheets to customize the look of your multilingual website or apply specific styles based on the language of the content!