Home>

I'd like to change the class by changing the class in JS as a problem that is clogging now
In the example, the header only changes, but the tags after that are
.c CSS seems to have been adapted, what should I do ...
Is there a way to write CSS that only applies to children or grandchildren?

Originally rewriting the body class and enclosing the whole with div to make each part, so it would be helpful if there was something that could be reflected only in grandchildren if possible

<! DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <link rel = "stylesheet" href = "index.css">
    <script type = "text/javascript" src = "index.js"></script>
    <title>Document</title>
</head>
<body>
    
        <header>header</header>
        <nav>nav</nav>
        <main>main</main>
         aside</aside>
        <footer>footer</footer>
    
    <form action = "./ setcss.cgi" method = "get" name = "mainForm">
        <input type = "button" value = "white">
        <input type = "button" value = "yellow">
        <input type = "button" value = "black">
    </form>
</body>
</html>
. a>header, footer, main, nav, aside
{box-sizing: border-box;padding: 10px;
border-radius: 6px;border: solid 1px # 00d;
background-color: # 44f;color: #fff;
transition: .5s;}
.b>header, footer, main, nav, aside
{box-sizing: border-box;padding: 10px;
border-radius: 6px;border: solid 1px # 000;
background-color: # 333;color: # ff0;
transition: .5s;}
.c>header, footer, main, nav, aside
{box-sizing: border-box;padding: 10px;
border-radius: 6px;border: solid 1px #ccc;
background-color: #fff;color: # 000;
transition: .5s;}
window.onload = function () {
    document.getElementById ("a"). onclick = function () {
        const main = document.getElementById ('style');
        main.classList.add ('a');
        main.classList.remove ('b', 'c');
    }
    document.getElementById ("b"). onclick = function () {
        const main = document.getElementById ('style');
        main.classList.add ('b');
        main.classList.remove ('a', 'c');
    }
    document.getElementById ("c"). onclick = function () {
        const main = document.getElementById ('style');
        main.classList.add ('c');
        main.classList.remove ('a', 'b');
    }
}
  • Answer # 1

    . a>header, footer, main, nav, aside
    ↓↓↓
    .a>header, .a>footer, .a>main, .a>nav, .a>aside
    Or
    .a>*


    For example, if you want to remove a part (main)

    . a>*: not (main)

  • Answer # 2

    . a>header ,. a>footer, .a>main, .a>nav, .a>aside
    {box-sizing: border-box;padding: 10px;
    border-radius: 6px;border: solid 1px # 00d;
    background-color: # 44f;color: #fff;
    transition: .5s;}
    .b>header, .b>footer, .b>main, .b>nav, .b>aside
    {box-sizing: border-box;padding: 10px;
    border-radius: 6px;border: solid 1px # 000;
    background-color: # 333;color: # ff0;
    transition: .5s;}
    .c>header, .c>footer, .c>main, .c>nav, .c>aside
    {box-sizing: border-box;padding: 10px;
    border-radius: 6px;border: solid 1px #ccc;
    background-color: #fff;color: # 000;
    transition: .5s;}

Related articles