title: A :nth-child selector conflicts with another
body: <p>I have used <code>:nth-child</code> for a list element - <code>li:nthchild(2)</code> in a class- "one". There is another list element on the page belonging to another class(class="two)" and the css of the class "one" applies to the list element of the class "two".</p>
  
  <p>Here is the CSS of first list element" </p>
  
  <pre><code>.one li:nth-child(2){
  
      position: absolute;
  
      width: 80% !important;
  
      background-color: orange;
  
      color: #FFF;
  
      -webkit-border-radius: 2px;
  
      -moz-border-radius: 2px;
  
      border-radius: 2px;
  }
  </code></pre>
  
  <p>And this is for the class two:</p>
  
  <pre><code>.two li:nth-child(2) {
  float: left;
  margin: 0 5px 5px 0 !important;
  display: block;
  list-style: none;
  border: none;
  background: none;
  }
  </code></pre>
  
  <p>I don't want the class "two" to inherit the css of class one. Could any one tell me how to make the <code>.one li:nthchild(2)</code> css applies only to that class and not affect others? </p>
  
  <p>Thanks!</p>