title: using CSS: lang() selector to toggle a divs visibility
body: <p>Well it's not working, maybe it just doesn't.  I want to show a  container based on the browsers language.</p>
  
  <p>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.</p>
  
  <pre><code> .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; }
  </code></pre>
  
  <p>It seems to work the other way, if the language is valid I can hide divs, but not show them.</p>
  
  <p>Any ideas how to do this using, ideally, just css.  I want a lean solution.</p>