title: CSS nested rules, unexpected behaviour for overriding rules
body: <p>I am experiencing a strange behaviour, but it is probably as it should be, however it is unexpected and undesired.</p>
  
  <p><strong>The sample HTML:</strong> </p>
  
  <pre><code>&lt;div class='rtl'&gt;
  
      &lt;div class='ltr'&gt;
  
          &lt;div class='floatleft'&gt;
              A 
          &lt;/div&gt;        
          &lt;div class='floatleft'&gt;
              B
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>and the CSS:</strong> </p>
  
  <pre><code>.ltr .floatleft {  
      float:left;
  }
  
  .rtl .floatleft {  
      float:right;
  }
  </code></pre>
  
  <p>The output however is floated right because it is the rule that is specified last in the css file: <strong>.rtl .floatleft { float: right }</strong> </p>
  
  <p>However, sine the class 'ltr' is specified on a nested element, my hope or desire was for that rule to take precedence, so that you can always override whatever the ancestors has applied. </p>
  
  <p>But this is not working though. Is there a way that I am unable to see here? </p>
  
  <p>HERE IS ANOTHER QUESTION SIMILAR TO THIS ONE: </p>
  
  <p><a href="https://stackoverflow.com/questions/18528801/css-select-next-match">CSS select next match</a></p>