Selecting nested anchor in a list via css

I am trying to select the list item with an anchor via css but can't figure out how to do so without selecting ALL anchors within all lists. Here is the list:

  <ul>
    <li class="fbar">&nbsp;</li>
    <li class="menuItem">
    <a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail"/></a>
    </li>
    <li class="menuItem">
    <a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail"/></a> 
    </li>
    <li class="menuItem">
    <a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail"/></a>
    </li>
    <li class="menuItem">
    <a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail"/></a>
   </li>
</开发者_如何学Pythonul>

So I want to select something like

.menuItem li a {
     color:red
}; 

but that is wrong. So what is the right way to arrange it if there is one?

I guess that this is what you want:

li.menuItem a {
   border:1px solid red;
}; 

This will select all anchors (<a>) in any listitem with class "menuitem".

I'm not sure what you exactly want to do. Four of your list items have anchors inside. Which one do you want to select now?

You can select all anchors in all list items with class "menuItem" with li.menuItem a {color:red};. But that's not what you need, huh

You can use Javascript for that. Here's a jQuery Example

$('.menuItem').has('a').css('background-color', 'red');