title: nth-child ul list item background repeating to sub ul lists
body: <p>I'm busy with the design of a Bigcommerce website and have found a css syntax problem with list items and their respective backgrounds.</p>
  
  <p>The List item headings and the list items themselves are generated from a database. Here's what my code looks like :</p>
  
  <pre><code>.Left #SideCategoryList ul li:first-child a {
  background-image:url("hiddenurl/product_images/uploaded_images/cat-types.png") !important;
  padding-left:10px;
  padding-top:25px;    
  }
  
  .Left #SideCategoryList ul li:nth-child(2) a {
   background-image:url("hiddenurl/product_images/uploaded_images/cat-collections.png") !important;
  padding-left:10px;
  padding-top:36px;
  }
  .Left #SideCategoryList ul li:nth-child(3) a {
  background-image:url("hiddenurl/product_images/uploaded_images/cat-themes.png") !important;
  padding-left:10px;
  padding-top:17px;
  }
  </code></pre>
  
  <p>These images display perfectly as the headers' backgrounds of my list items.</p>
  
  <p>However these backgrounds are then added to the subsequent ul list items which I cant seem to remove.</p>
  
  <p>I have tried to force the subsequent list items to have no background with the following:</p>
  
  <pre><code>.Left #SideCategoryList ul li ul li a {
  background-image:none !important;
  }
  </code></pre>
  
  <p>But they still won't go away.</p>
  
  <p>Do you guys have any Idea how I can either recode the list item's backgrounds or to force the rest of the list items so these backgrounds only appear on the "outer" Ul's list item headings?</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>Edit</strong>  I'm removing my url for privacy concerns. The full http:\ url is in the original css.</p>
  
  <p><strong>Edit 2</strong> For Clarity, the lists structures are laid out like this :</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
      &lt;li&gt; 
         &lt;ul&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
           &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>