Difference between element.class{} and element . class{}

Question

I was mounting a screen using css and html, and came across the following situation:

class "x" is added with a js, when the user rolls the sidebar (if the position is greater than 0, class x is added to the element).

in my css I needed to change the background color, so I put:

elemento .x{
    codigo css...
}

and it didn’t work, but when I put it like this:

elemento.x{
    codigo css...
}

It worked. For those who saw no difference, it is in the space between "element" and ". x".

NOTE: I have some css code in which I put space and it works, but these are not added with js.

Why does this space make it difficult in some situations and not in others? What’s the difference?

Script that adds class:

<script type="text/javascript">
    window.addEventListener("scroll", function(){
        var header = document.querySelector("header");
        header.classList.toggle("x", window.scrollY > 0);
    });
</script>

Answer 1

When it has space it looks for the child of the element with the class x, when it lacks space css looks for the element with the class x

Example:

div.x {
  color: red;
}

div .x {
  color: blue;
}

<div class="x">
  conteudo da div
  
  <p class="x">filho da div</p>
</div>

Answer 2

When you use the following expression in your CSS, i.e..

.minhaClasse .subClasse {
    ...
}

It occurs as follows: Element > Element, as the image below describes.

When expressed in this way, combined class:

.mihaClasse.subClasse {
    ...
}

The element possessing .minhaClasse also possess .subClasse.

Most likely the class is being inserted into the same element so it worked. If you remove your class that precedes the class it will work because it will be independent of the parent class.

Extra use case for better understanding of how much to use combined class.

.textoGrande {
  font-size: 24px;
}

.textoGrande.textoCorAzul {
  color: #0000ff;
}

.textoGrande.textoNegrito {
  font-weight: bold;
}

<div class="textoGrande">Meu texto grande</div>
<div class="textoGrande textoCorAzul">Meu texto grande e Azul</div>
<div class="textoGrande textoCorAzul textoNegrito">Meu texto grande, Azul e Negrito</div>