What #id.class css means?

Question

I saw in a CSS declaration this:

#nav.js {
    display:none;
}

Can someone explain what this means? The html code is the following

<ul id="nav">
    <li><a href="#">Home3</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 1

#nav.js

This selects an element whose id is set to "nav" and has a class containing "js".

For example, it would select any of the following elements:

<figure id="nav" class="js"></figure>
<figure id="nav" class="foo js"></figure>
<figure id="nav" class="js bar"></figure>
<figure id="nav" class="foo js bar"></figure>

But it wouldn't select any of these elements:

<figure></figure>
<figure id="nav"></figure>
<figure class="js"></figure>
<figure id="nav" class="foo bar"></figure>

display: none

This as I'm sure you're already aware sets the element to not display at all on the page.

#nav.js { display: none; }

This combines the above. It selects any element with an id of "nav" and a class containing "js" and sets it to not display on the page.

Answer 2

In english, this means:

Find me any element, with an id of nav and has a class of js.

In vebose CSS, #nav.js actually would translate to:

*[id='nav'][class~='js']

Answer 3

it´s simple... When add a class .js the element will not display

HTML

<ul id="nav" class="js">
    <li><a href="#">Home3</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Answer 4

When you use #nav used for to assign css for the ID element

When you use .js then it will assign css to all the js class elements.

When you use #nav.js then it will only assign to the element which have both id=#nav and class='js'

And when you declare #nav .js then it will assign the css to all classes which are inside the #nav element.