title: Two classes next to each other in CSS
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="navigation_desktop"&gt;
  
      &lt;div class="button"&gt;1.0 Main Menu
          &lt;div class="FadeItem"&gt;
              &lt;ul&gt;
                  &lt;li&gt;1.1 Sub Menu &lt;/li&gt;
                  &lt;li class="button"&gt;1.2 Sub Menu
                      &lt;div class="FadeItem"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;1.2.1 Sub Menu&lt;/li&gt;
                              &lt;li&gt;1.2.2 Sub Menu&lt;/li&gt;
                          &lt;/ul&gt; 
                      &lt;/div&gt;
                  &lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> .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%;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
    $(".button").mouseenter(function() {
      $(this).children(".FadeItem").fadeIn(500);
    });
    $(".button").mouseleave(function() {
      $(this).children(".FadeItem").fadeOut(500);
    });
  });
  </code></pre>
  
  <p>With the code above I let <strong>FadeIn/Out</strong> some items once I hover over a button. The code works perfectly but I have a general question regarding the coding of the <strong>CSS</strong> in the example above.</p>
  
  <p>In the <strong>CSS</strong> there is this part:</p>
  
  <pre><code>.FadeItem .FadeItem {
  }
  </code></pre>
  
  <p>When do you create a <strong>CSS</strong> code like this? What does it trigger?</p>
  
  <p>I am a newbie to the <strong>CSS</strong> 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.</p>
  
  <p>The code you can also find here: <a href="https://jsfiddle.net/gge42bob/3/" rel="noreferrer">https://jsfiddle.net/gge42bob/3/</a></p>