Class does not append on javascript appendChild() function

Question

I have an onclick() event on a button, to execute te following code:

function digital_tour(){
    let loader = document.createElement("div");
    loader.className = "loader";
    console.log(loader);
    document.getElementById("main-div").appendChild(loader);
}

The code works, and the element loader is shown by the console.log and returns:

<div class="loader"></div>

The loader div get appended into the main-div, including the class, but my css style is not shown. My CSS code

.main-bg .loader{
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: green;
    z-index: 5;
}

I want to show the CSS style to the loader div, but it does not work. What do I need to do to make this work?

Answer 1

the CSS class works like this: .main-bg.loader means you should have an element with main-bg class which has an element with the.loader class inside in other words the CSS you have will only be applied to a loader class which is inside the element with main-bg class. but you are appending loader to main-div not main-bg.