CSS での多言語切り替えについて

CSSで多言語対応できるページを作っているのですが日本語と英語以外うまくいきません．
まず，ファーム画面上部に各国の国旗を表示させ，国旗を押すと言語の切り替えをしようと思っています．
（日本語英語中文簡体中文繁体韓国語フランス語）

(ファームのtmpl）
<input type="radio" name="font-size" id="lang-jp" value="1" checked>
<input type="radio" name="font-size" id="lang-en" value="2">

<input type="radio" name="font-size" id="lang-ch" value="3"> <input type="radio" name="font-size" id="lang-chs" value="4"> <input type="radio" name="font-size" id="lang-ko" value="5"> <input type="radio" name="font-size" id="lang-fr" value="6"> <table border=0> <tbody align="center"> <tr> <td><label for="lang-jp"><img src="JapanFlag.jpg"></td> <td><label for="lang-en"><img src="KingdomFlag.jpg"></td> <td><label for="lang-ch"><img src="ChinaFlag.jpg"></td> <td><label for="lang-chs"><img src="ChinaFlag.jpg"></td> <td><label for="lang-ko"><img src="KoreaFlag.jpg"></td> <td><label for="lang-fr"><img src="FranceFlag.jpg"></td> </tr> </tdbody> </table> <p lang="en">English now</p> <p lang="jp">日本語です．</p> ・・・・など

((下がCSS.tmplです．))

input[id="lang-jp"]:checked ~ :lang(en),:lang(ko),:lang(ch),:lang(chs),*:lang(fr),
input[id="lang-jp"]:checked ~ * :lang(en), :lang(ko), :lang(ch), :lang(chs), *:lang(fr) {

opacity:0;position: absolute;
}

input[id="lang-en"]:checked ~ :lang(jp),:lang(ko),:lang(ch),:lang(chs),*:lang(fr),
input[id="lang-en"]:checked ~ * :lang(jp), :lang(ko), :lang(ch), :lang(chs), *:lang(fr) {

opacity:0;position: absolute;
}

input[id="lang-ko"]:checked ~ :lang(jp),:lang(ch),:lang(chs),:lang(fr),
input[id="lang-ko"]:checked ~ * :lang(jp), :lang(ch), :lang(chs), *:lang(fr) {
opacity:0;position: absolute;
}
（とりあえず韓国のみ）
・・・・

このままでは日本語と英語の切り替えしかできません．
今は韓国の旗を押したら英語表示しかでません．
他の中国語などは日本語と英語の両方が表示されています．

また，"[id="lang-ko"]:checks”を増やした際に ":lang(en)" を増やすと，すべてのファームから英語が消えてしまいます．
韓国語のファームに英語だけでなのは checksの後に ":lang(jp)" をいれてるからかなと思うのですが，
どうすれば各言語をきれいにそれぞれ表示するようにできるのでしょうか・・・

また，最初のページで選択した言語を次のページでも継続して使えるように
別ページにid要素の移動をすることはできるのでしょうか・・・

何もかもわからない状態で申し訳ありません．
お分かりの方がいらっしゃいましたらご回答の程よろしくお願いいたします．

行動規範の内容に同意します

回答1件

下記CSSでいかがでしょうか(jsfiddleにサンプルUP済)。

CSSで多言語切り替え - JSFiddle

html
1<style>
2#lang-ja:checked~:not(:lang(ja)):not(.select-lang),
3#lang-en:checked~:not(:lang(en)):not(.select-lang),
4#lang-ch:checked~:not(:lang(ch)):not(.select-lang),
5#lang-chs:checked~:not(:lang(chs)):not(.select-lang),
6#lang-ko:checked~:not(:lang(ko)):not(.select-lang),
7#lang-fr:checked~:not(:lang(fr)):not(.select-lang) {
8  display: none;
9}
10input.select-lang {
11  margin: 1em 1em 1em 0.5em;
12}
13</style>
14</head>
15<body>
16<label class="select-lang" for="lang-ja">日本語</label><input id="lang-ja" class="select-lang" type="radio" name="lang" value="ja" checked />
17<label class="select-lang" for="lang-en">English</label><input id="lang-en" class="select-lang" type="radio" name="lang" value="en" />
18<label class="select-lang" for="lang-ch">中国語</label><input id="lang-ch" class="select-lang" type="radio" name="lang" value="ch" />
19<label class="select-lang" for="lang-chs">chs</label><input id="lang-chs" class="select-lang" type="radio" name="lang" value="chs" />
20<label class="select-lang" for="lang-ko">ko</label><input id="lang-ko" class="select-lang" type="radio" name="lang" value="ko" />
21<label class="select-lang" for="lang-fr">フランス</label><input id="lang-fr" class="select-lang" type="radio" name="lang" value="fr" />
22
23<p lang="ja">日本語</p>
24<p lang="en">English</p>
25<p lang="ch">中国語</p>
26<p lang="chs">chs</p>
27<p lang="ko">ko</p>
28<p lang="fr">フランス</p>