CSS Hide some text with class and id

Question

Hi I am trying to make a website with CSS and want to know if it is possible to hide the text according to language. We use an asp website and languages are English and French. For simplicity of the person who will document the FAQ, I am obliged to do html(No template and DB). I want to do a CSS code that it check if the languageCode is "EN" or "FR" and put invisible tags where the language is not select. I can do Javascript to change CSS but because I use CSS to hide and show my question-anwser, I wanna know if I can do it with only CSS. Here a sample of what the template is, wher the info I want and where I want to apply css after.:

<div>
  <div>
    <div>
      <div class="languageCode" id="fr" style="display: none; visibility: hidden;">fr</div>
    </div>
  </div>
</div>
<div class="MainContent">
  <div>
    <h1>FAQ</h1>
      <label><input type="checkbox" id="language" />Français ?</label>
      <ul class="collapse-list">
        <li class="fr">
          <label class="collapse-btn" for="question-1">
            Titre FR1
          </label>
          <input class="collapse-open" type="radio" id="question-1" name="question" aria-hidden="true" hidden="hidden"/>
          <div class="collapse-panel">
            <div class="collapse-inner">
              <p>
                texte
              </p>
            </div>
          </div>
        </li>
        <li class="en">
          <label class="collapse-btn" for="question-2">
            Title EN1
          </label>
          <input class="collapse-open" type="radio" id="question-2" name="question" aria-hidden="true" hidden="hidden"/>
          <div class="collapse-panel">
            <div class="collapse-inner">
              <p>
                text
              </p>
            </div>
          </div>
        </li>
      </ul>
  </div>
</div>

Here a small part of the CSS

.collapse-open 
{
  display: none;
}

.collapse-panel 
{
  display: none;
  margin-left: 10px;
}

.collapse-open:checked ~ .collapse-panel 
{
  display: block;
}

Here the part that I want to do but I can't say how to make it work

#fr.languageCode ~ .fr{
  visibility: hidden;
  display: none;
}
#fr.languageCode ~ .en{
  visibility: visible;
}
#en.languageCode ~ .fr{
  visibility: visible;
}
#en.languageCode ~ .en{
  visibility: hidden;
  display: none;
}

Like if the ID is #fr you display only french content and if ID is #en you display only english content. Note: I know the selector in my CSS doesn't work but I can't find what I should use or if it's possible to do what I want without javascript.

Answer 1

You can try using :lang selector css. But, it can be tricky taking into account all cases, xml lang etc. I think the javascript to detect the user's browser's language is simple, so why not just set a global class based on that, and then you can hide / show with css accordingly. You do need to make sure you've got a complete list of possible lang values.

var language = window.navigator.userLanguage || window.navigator.language;
alert(language);
document.getElementById('content').className = language;

div {
  visibility: hidden;
}
#content.fr .french {
  visibility: visible;
}
#content.en-US .english {
  visibility: visible;
}
#content.sp .spanish {
  visibility: visible;
}

<div id="content" class="default">
  <div class="french">Si votre navigateur préférence lang est francais , vous devriez voir cette
  </div>
  <div class="english">If your browser lang preference is ENGLISH you should see this
  </div>
  <div class="spanish">Si su navegador lang preferencia es espanol debería ver esto
  </div>
</div>