0

I have set lang attribute in the "body" tag. I have different set of languages in my application. I need to set separate styling for all elements based on the different lang values.
e.g:

  • if lang=es-cl, need to set different set of styling.
  • if lang=pt-br, set different set of styling.

What is the best practice for achieving this (in using css only) ?.

Can I do something like the following (parent child something like that).
body:lang(it) {

.header { ...css styling.. }

.content .left-panel { ...css styling... }

}



Thanks

Cham
  • 787
  • 3
  • 11
  • 25
  • Can't believe I don't find a dupe... But what you want is `:lang` pseudo class. There is [this](https://stackoverflow.com/questions/35682006/css-lang-pseudo-class-vs-attribute-selector) but they already did the little research you are missing here... – Kaiido Aug 18 '18 at 01:42

2 Answers2

0

You can use the CSS value Selector , [attribute*="value"] :

[lang="es-cl"]

or 

[lang="pt-br"]
Taha Elkhaoua
  • 81
  • 1
  • 9
0

There are two ways to achieve this using CSS attribute selector

div[lang="en"] {
  background-color: yellow;
}

and CSS pseudo-class

div:lang(en) {
  css declarations;
}

This select all div element with lang="en" attribute. If you want to select all element with attribute lang="en" remove div from the CSS selector.

Cocest
  • 147
  • 1
  • 2
  • 15
  • Thanks. Do I have to set lang attribute to every element ? ( I have already set in the body tag). Bit confused how to set the css for different languages (i'm pretty new to css). – Cham Aug 18 '18 at 03:19
  • @ChamalPerera No, you don't have to set lang attribute to every element. Apply this to `body` element or parent element containing every element you want to style, example: `body:lang(en) {css here}`, it will apply the CSS to all child element of body. – Cocest Aug 22 '18 at 23:30