Sélecteur choix langue

Sélection du choix de la langue en pur CSS en utilisant les sélecteurs d'attribut [lang].

Espace démo

Principe

Déclaration élément HTML : <html lang="fr-FR">

On utilise l'attribut lang de l'élément html pour afficher/masquer les différents éléments de sélection de la langue via les sélecteurs d'attribut [lang].

Principe

Déclaration élément HTML : <html lang="ch-CH">

On utilise l'attribut lang de l'élément html pour afficher/masquer les différents éléments de sélection de la langue via les sélecteurs d'attribut [lang].

Principle

HTML element declaration : <html lang="en-GB">

We use the lang attribute of the html element to show/hide the various language selection elements via the [lang] attribute selectors.

Principio

Dichiarazione dell'elemento HTML : <html lang="it-IT">

Utilizziamo l'attributo lang dell'elemento html per mostrare/nascondere i vari elementi di selezione della lingua tramite i selettori dell'attributo [lang].

HTML choix langue

<details class="lang-select">
  <summary>
    <span class="lang-flag lang-flag-ch"></span>
    <span class="lang-flag lang-flag-en"></span>
    <span class="lang-flag lang-flag-fr"></span>
    <span class="lang-flag lang-flag-it"></span>
  </summary>
  <div class="liste">
    <a href="#" lang="fr-FR" title="Français"><span class="lang-flag lang-flag-fr"></span></a>
    <a href="#" lang="en-GB" title="English"><span  class="lang-flag lang-flag-en"></span></a>
    <a href="#" lang="it-IT" title="Italiano"><span class="lang-flag lang-flag-it"></span></a>
    <a href="#" lang="fr-CH" title="Suisse"><span   class="lang-flag lang-flag-ch"></span></a>
  </div>
</details>

CSS appliqué

C'est un peu verbeux et cela pourrait être simplifié. On se rend compte que cela va devenir vite « abscons » si le nombre de langues est important.

Ressources