Search code examples
htmlcsslang

using CSS: lang() selector to toggle a divs visibility

Well it's not working, maybe it just doesn't. I want to show a container based on the browsers language.

The intial setting for all the divs is vanished. I've tried using the property display: none, and also visibility: hidden, to no avail. The language selector won't override the initial setting.

 .france-box, .german-box, .dutch-box, .italy-box { display: none }

 .france-box :lang(fr) { display: flex }
 .german-box :lang(de) { display: flex; }
 .dutch-box :lang(nl) { display: flex; }
 .italy-box :lang(en) { display: flex; }

It seems to work the other way, if the language is valid I can hide divs, but not show them.

Any ideas how to do this using, ideally, just css. I want a lean solution.

Solution

  • You have two problems here:

    Changing the display of an element descended from display: none does nothing

    The descendant combinator between the class selector and the lang pseudo-class selector mean that only elements descended from elements which are display: none (from line 1) will be targetted.

    Here is a simplified example:

    div {
  display: none;
}

div span {
  display: flex
}
    <div><span>...</span></div>

    Since the div is display: none, it doesn't matter what the span is. It won't be shown because it is in the div.

    The :lang: pseudo-class doesn't do what you think it does

    It represents the language the element is written in. It has nothing to do with the configuration of the browser (i.e. nothing to do with the language the browser UI is in and nothing to do with the user's language preferences).

    :lang(en) { background: pink; }
:lang(fr) { background: yellow; }
    <p lang="en">This is English</p>
<p lang="fr">C'est français</p>

    CSS has no mechanism for detecting the user's language.

    You can use server-side code to examine the Accept-Lang request header sent by the browser and provide a different document based on the user's preferences.