CSS Selector unordered list image name

Question

From the html shown below I want to select all the odd numbered, li class="items-3", then select the three descriptions of the pictures, shown highlighted below using either, using,** span data-picture="" data-alt="Red Range Rover Evoque">, or using the img tag img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street.

I have tried the following css:

li.items-3:first-child div:first-child a span[data-alt]:first-child

which gives me :

span data-picture="" data-alt="Red Range Rover Evoque" class=""

But I can't seem get the data-alt value, I have tried the css below but that doesn'twor either,

li.items-3:first-child div:first-child a span[data-alt]:first-child > span[data-alt>

I would be grateful if someone could suggest a solution.

Thanks

 <ul class="mediaCarousel" style="text-align: left; float: none; position:   absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 11693px; height: 842px;">
     <li class="items-3" style="width: 1063px;">
     <div class="el">
       <a href="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
          <span data-picture="" data-alt=**"Red Range Rover Evoque">**
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg"></span>
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(max-width: 400px)"></span>
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(min-width: 1000px)">
               <img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
          </span>
          <noscript> 
                <img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" /> 
          </noscript>
          </span>
        </a>
  </div>
  <div class="el width-1of2">
  <a href="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
    <span data-picture="" data-alt="**Red Range Rover Evoque at an outdoor cinema**">
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg"></span>
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(max-width: 400px)"></span>
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(min-width: 1000px)">
         <img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
  </span>
  <noscript> 
        <img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" /> 
  </noscript>
  </span>
  </a>
  </div>
  <div class="el width-1of2">
    <a href="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg">
    <span data-picture="" data-alt="**Red Range Rover Evoque Front View**">
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg"></span>
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(max-width: 400px)"></span>
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(min-width: 1000px)">
    <noscript> 
         <img alt="Red Range Rover Evoque Front View" src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" />
   </noscript>
   </span>
   </a>
   </div>
   </li>
   <li class="items-1" style="width: 1063px;">
   <li class="items-3" style="width: 1063px;">
   <li class="items-1" style="width: 1063px;">
   <li class="items-3" style="width: 1063px;">
 </ul>

Answer 1

Try with this selector:

li.items-3 span[data-alt*="Red Range Rover"]  span

It's hard to make a demo with your code but here you have it http://jsfiddle.net/Y8Xr6/5/