CSSで文字サイズを変更するのですが、divの中では反映されないのは、なぜか？

文字サイス可変（大中小）と、日本語英語切り替え両方を実装したい。

最終的には文字サイス可変（大中小）と、日本語英語切り替え両方を、スマホPC対応のレスポンシブで実装したいです。

更新作業のことも考え、HTMLは一つにまとめいたいので、CSSかJavaScriptで、できればと考えています。

CSSで簡単に文字の大小が切り替えられるものがあったので、とりあえず作成したものが下記です。

動作するHTMLと、CSS

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes">
6<title>文字大中小</title>
7<meta name="keywords" content="">
8<meta name="description" content="">
9<link rel="stylesheet" href="0201.css" type="text/css" media="screen">
10</head>
11<body>
12
13<input type="radio" name="charsize" id="dai">大
14<input type="radio" name="charsize" id="chu" checked>中
15<input type="radio" name="charsize" id="sho">小
16
17<div class="wrap1">
18test02<br>
19<a href="test03.htm">test03</a><br>
20テスト
21</div>
22
23</body>
24</html>

CSS
1@charset "utf-8";
2#dai:checked ~ .wrap1{font-size:1.5em;}
3#sho:checked ~ .wrap1{font-size:0.8em;}

これにヘッダーを付けようとしました。
とりあえず、大中小の部分を<div>で囲み、枠線だけ付けて様子を見ようとすると、動作しません。

動作しないHTMLと、CSS

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes">
6<title>文字大中小</title>
7<meta name="keywords" content="">
8<meta name="description" content="">
9<link rel="stylesheet" href="0201.css" type="text/css" media="screen">
10</head>
11<body>
12<div class="header">
13<input type="radio" name="charsize" id="dai">大
14<input type="radio" name="charsize" id="chu" checked>中
15<input type="radio" name="charsize" id="sho">小
16</div>
17<div class="wrap1">
18test02<br>
19<a href="test03.htm">test03</a><br>
20テスト
21</div>
22
23</body>
24</html>

CSS
1@charset "utf-8";
2#dai:checked ~ .wrap1{font-size:1.5em;}
3#sho:checked ~ .wrap1{font-size:0.8em;}
4
5.header { border: 1px solid #ccc; }

試したこと

Class名（headerやwrap1）が予約語などと重なっているのかな？と思い、class名を変えてみたものの動作しません。headerのdivを削除すると動作します。

質問したいこと

ネット検索すると、文字の大小か、日本語英語切り替えの片方ずつのサンプルコードなどはたくさん見つかります。またJavaSriptまたはjQueryを利用するのが一般的なようですが、よく使われている方法など知ってる方がおられましたら教えていただけませんか？
よろしくお願いいたします。

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

回答3件

デザイン上divで囲みたいと言う場合は、labelをinputと紐づけて、inputは非表示にするといいでしょう。

html
1<input type="radio" name="charsize" id="dai">
2<input type="radio" name="charsize" id="chu" checked>
3<input type="radio" name="charsize" id="sho">
4<div class="header">
5  <label for="dai">大</label>
6  <label for="chu">中</label>
7  <label for="sho">小</label>
8</div>
9<div class="wrap1">
10  test02<br>
11  <a href="test03.htm">test03</a><br>
12  テスト
13</div>

css
1@charset "utf-8";
2input[type='radio'] {
3  display: none;
4}
5.header > label {
6  cursor: pointer;
7}
8#dai:checked ~ .header label[for='dai'],
9#chu:checked ~ .header label[for='chu'],
10#sho:checked ~ .header label[for='sho']{
11  background-color: red;
12}
13
14#dai:checked ~ .wrap1{font-size:1.5em;}
15#sho:checked ~ .wrap1{font-size:0.8em;}
16
17.header {border: 1px solid #ccc; }