title: CSS - parent element overrides child element properties
body: <p>The problem is very simple:</p>
  
  <pre><code>    &lt;div id="main-content"&gt;
  &lt;ul&gt;
      &lt;li&gt;
     &lt;div class="post-row"&gt;
           &lt;div class="post-footer"&gt;
  
                 This is the Footer       
                  &lt;div class="footer-buttons"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Edit&lt;/li&gt;
                          &lt;li&gt;Reply&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
           &lt;/div&gt;
     &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And now main content:</p>
  
  <pre><code>#main-content ul {
      margin:0;
      padding:0;
  }
  
  #main-content ul li {
      display:block;
      list-style:none;
  }
  </code></pre>
  
  <p>And last, footer-buttons:</p>
  
  <pre><code>.footer-buttons {
      float:right;
  }
  .footer-buttons ul {
      margin:0;
      padding:0;
  }
  .footer-buttons ul li {
      display: inline;
  }
  </code></pre>
  
  <p>The problem is that the list in <code>.footer-buttons</code> is displayed as block. And in fact when I checked DOM the <code>display: inline</code> is overrided by the <code>#main-content</code>.</p>
  
  <p>From what I know understrand this shouldn't happen. Or am I wrong and id elements will always override child classes?</p>