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 above code, I let FadeIn / Out to some elements when I click the button. The code works fine, but I have a general question regarding CSS coding in the above example.

CSS has this part:

 .FadeItem .FadeItem { } 

When you create CSS code, how is it? What does it mean?

I am new to CSS programming, and so far I have only used one class or two classes, separated by a comma. I want to improve my knowledge of coding so it would be great 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 the .FadeItem inside another .FadeItem , so in this case it is useful because the styles only apply to the internal element of .FadeItem and not to the external.

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} 

target is only one that is inside another

Answer 2

This code:

 .FadeItem .FadeItem { } 

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

For instance:

 .FadeItem .FadeItem { color: red; } 

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

This code:

 .FadeItem { } 

Selects all items with the FadeItem class.

For instance:

 .FadeItem { color: red; } 

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