Two classes next to each other in CSS

Question

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navigation_desktop">

    <div class="button">1.0 Main Menu
        <div class="FadeItem">
            <ul>
                <li>1.1 Sub Menu </li>
                <li class="button">1.2 Sub Menu
                    <div class="FadeItem">
                        <ul>
                            <li>1.2.1 Sub Menu</li>
                            <li>1.2.2 Sub Menu</li>
                        </ul> 
                    </div>
                </li> 
            </ul>
        </div>
    </div>
</div>

CSS:

 .button {
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

.FadeItem {
display: none
}

.FadeItem .FadeItem {
position: absolute;
left: 100%;
top: 0;
width: 130px;
height: 100%;
}

jQuery:

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});

With the code above I let FadeIn/Out some items once I hover over a button. The code works perfectly but I have a general question regarding the coding of the CSS in the example above.

In the CSS there is this part:

.FadeItem .FadeItem {
}

When do you create a CSS code like this? What does it trigger?

I am a newbie to the CSS programming and so far I only used one class or two classes divided by a comma. I want to improve my coding knowledge so it would be cool if you could give me an explanation about the code above.

The code you can also find here: https://jsfiddle.net/gge42bob/3/

Answer 1

It targets a .FadeItem within another .FadeItem, so in this case it's useful because the styles only apply to the inner .FadeItem element, not the outer.

Your markup is similar to

<div class="FadeItem">
    <div class="FadeItem"></div>
</div>

So only

.FadeItem {styles}

will target both of them, but

.FadeItem .FadeItem {styles}

targets only the one that's inside the other

Answer 2

This code:

.FadeItem .FadeItem { }

Selects all elements with class FadeItem that is inside another element with class FadeItem.

For example :

.FadeItem .FadeItem {
    color: red;
}

<div class="FadeItem">First Fade Item
    <div class="FadeItem">
       Second Fade Item 
    </div>
</div>

This code:

.FadeItem { }

Selects all elements with class FadeItem.

For example :

.FadeItem {
    color: red;
}

<div class="FadeItem">First Fade Item
    <div class="FadeItem">
       Second Fade Item 
    </div>
</div>