title: css parent class
body: <p>I have a question regarding CSS and how to bequeath background information within an unordered list.</p>
  
  <p>I have a footer in that I would like to show different flags. there I have a footer class</p>
  
  <pre><code> &lt;ul class="flag"&gt;
       &lt;li id="de"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p><code>.flag</code> consists of:</p>
  
  <pre><code>.footer #legals #list2 .flag{
      width: 20px;
      height: 10px;
      display: inline-block;
      float:left;
      margin-top: 16px;
      margin-left: 15px;
      background-image:url(../images/flags.png);
  }
  .footer #legals #list2 .flag #de{   
      background-position: -40px;
  }
  .footer #legals #list2 .flag #en{
      background-position: -20px;
  }
  .footer #legals #list2 .flag #en_us{
      background-position: -20px;
  }
  </code></pre>
  
  <p>So I thought it would be easier for each flag just to change the entry <code>background-position</code>. 
  But for some reason this is not working and I dont know why? I also tried to use instead of <code>li id</code> <code>div id</code> but it is still the same.</p>
  
  <p>If there is someone who could help me out I really would appreciate it.</p>