title: Can I control CSS selection for :hover on nested elements?
body: <p>I'm trying to figure a solution out to the following. I have the following HTML:</p>
  
  <pre><code>&lt;div style="width:50em; height:10em"&gt;
      &lt;span class='rating-5 rating-span'&gt;
          &lt;span class='rating-4 rating-span'&gt;
              &lt;span class='rating-3 rating-span'&gt;
                  &lt;span class='rating-2 rating-span'&gt;
                      &lt;span class='rating-1 rating-span'&gt;
                          &lt;div class='rating-star unselected'&gt;&lt;/div&gt;
                      &lt;/span&gt;
                      &lt;div class='rating-star unselected'&gt;&lt;/div&gt;
                  &lt;/span&gt;
                  &lt;div class='rating-star unselected'&gt;&lt;/div&gt;
               &lt;/span&gt;
               &lt;div class='rating-star unselected'&gt;&lt;/div&gt;
           &lt;/span&gt;
           &lt;div class='rating-star unselected'&gt;&lt;/div&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre><code>div.rating-star{
      display:inline-block;
      width:20%;
      height:100%;
      /*border:solid thin black;*/
      padding:0px;
      margin:0px;
  }
  
  div.rating-star.unselected {
      background-image: url(star.jpg);   
      background-size: contain;
      background-repeat: no-repeat;
  }
  
  .rating-span:hover div.rating-star {
      background-image: url(hover.jpg);   
      background-size: contain;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>The idea is that, if you hover over a star, all the stars from the left will light up.
  However, what <em>actually</em> happens is that all of the stars light up, wherever you hover.</p>
  
  <p>Now it's clear to me that this is because my :hover selector is selecting the outermost span. My question is this: in the case of the :hover selector, there is a determination of which element is being hovered over. In the case where that element contains other elements (of the same type), is there a way to stipulate <em>which</em> element should be selected. In this case it would be the lowest possible one.</p>
  
  <p>I appreciate that I could do this quite simply with Javascript; I'm just hoping that there's a pure CSS solution to it.</p>
  
  <p><strong>UPDATE</strong>
  Here's a JSFiddle: <a href="http://jsfiddle.net/MkJmj/1/" rel="nofollow">http://jsfiddle.net/MkJmj/1/</a>
  It's slightly modified to use absolute urls to the images, but otherwise identical</p>