Problem in CSS

Question

Guys, I have a problem, I know this is functional, but it never worked for me.

Follows the code:

HTML

<section class="menu-departamentos">
    <h2>Departamentos</h2>
    <nav>
        <ul>
            <li><a href="#">Blusas e Camisas</a></li>
            <ul>
                <li><a href="#">Manga curta</a></li>
                <li><a href="#">Manga cumprida</a></li>
                <li><a href="#">Camisa social</a></li>
                <li><a href="#">Camisa casual</a></li>
            </ul>
            <li><a href="#">Calças</a></li>
            <li><a href="#">Saias</a></li>
            <li><a href="#">Vestidos</a></li>
            <li><a href="#">Sapatos</a></li>
            <li><a href="#">Bolsas e Carteiras</a></li>
            <li><a href="#">Acessórios</a></li>
        </ul>
    </nav>
</section>

CSS

.menu-departamentos li ul {
    display: none;
}

My doubt must be quite simple.

1. li ul separated by space -> What name is given for this?
2. li,ul comma separated -> What name is given for this?

My problem really is... I can make css changes using li,ul NORMAL, HOWEVER, USING li ul, which is what I REALLY need, it NEVER changes.

User browser: Google Chrome

Answer 1

Space-separated selector is called descending selector, means that he will take for example all the ul who is the son of li who is a great-grandson of .menu-departamentos.

Comma separated selector is used to apply the same style to two or more selectors(by class, id and tag), without the need for code repetition.