htmlのclassを書き換えて複数の見た目をまとめて変更させるCSSの書き方を教えて欲しいです

今詰まっている問題としてはJSでclassの変更をして見た目を変更させたいんですが
例で出しているもので言うとheaderだけは変更が効くのですがそれ以降のタグたちは
.cのCSSが適応されているっぽいんですけどこれはどうしたらいいんでしょうか...
子あるいは孫だけに適応させるようなCSSの書き方とかはあるのでしょうか？

本来はbodyのクラスを書き換えて全体をdivで囲んで各パーツを作ってるのでできれば孫だけに反映できるものがあると助かるんですけど

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="index.css">
6    <script type="text/javascript" src="index.js"></script>
7    <title>Document</title>
8</head>
9<body>
10    <div id="style" class="c">
11        <header>header</header>
12        <nav>nav</nav>
13        <main>main</main>
14        <aside>aside</aside>
15        <footer>footer</footer>
16    </div>
17    <form action="./setcss.cgi" method="get" name="mainForm">
18        <input type="button" id="a" value="白">
19        <input type="button" id="b" value="黄">
20        <input type="button" id="c" value="黒">
21    </form>
22</body>
23</html>

css
1.a>header,footer,main,nav,aside 
2{box-sizing: border-box;padding: 10px;
3border-radius: 6px;border: solid 1px #00d;
4background-color:#44f;color:#fff;
5transition: .5s;}
6
7.b>header,footer,main,nav,aside 
8{box-sizing: border-box;padding: 10px;
9border-radius: 6px;border: solid 1px #000;
10background-color:#333;color:#ff0;
11transition: .5s;}
12
13.c>header,footer,main,nav,aside 
14{box-sizing: border-box;padding: 10px;
15border-radius: 6px;border: solid 1px #ccc;
16background-color:#fff;color:#000;
17transition: .5s;}
18

JS
1window.onload = function(){
2    document.getElementById("a").onclick = function(){
3        const main = document.getElementById('style');
4        main.classList.add('a');
5        main.classList.remove('b','c');
6    }
7    document.getElementById("b").onclick = function(){
8        const main = document.getElementById('style');
9        main.classList.add('b');
10        main.classList.remove('a','c');
11    }
12    document.getElementById("c").onclick = function(){
13        const main = document.getElementById('style');
14        main.classList.add('c');
15        main.classList.remove('a','b');
16    }
17}
18

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

回答2件

ベストアンサー

css
1.a>header,footer,main,nav,aside 
2↓↓↓
3.a>header,.a>footer,.a>main,.a>nav,.a>aside 
4もしくは
5.a>*

たとえば一部を除きたいなら（仮にmain）

css
1.a>*:not(main)

投稿2019/11/29 05:16

yambejp

総合スコア114779

CSS
1
2.a>header,.a>footer,.a>main,.a>nav,.a>aside 
3{box-sizing: border-box;padding: 10px;
4border-radius: 6px;border: solid 1px #00d;
5background-color:#44f;color:#fff;
6transition: .5s;}
7
8.b>header,.b>footer,.b>main,.b>nav,.b>aside 
9{box-sizing: border-box;padding: 10px;
10border-radius: 6px;border: solid 1px #000;
11background-color:#333;color:#ff0;
12transition: .5s;}
13
14.c>header,.c>footer,.c>main,.c>nav,.c>aside 
15{box-sizing: border-box;padding: 10px;
16border-radius: 6px;border: solid 1px #ccc;
17background-color:#fff;color:#000;
18transition: .5s;}
19