Target samelevel and parent lis

Question

I have this example: http://jsfiddle.net/4EbLu/

HTML:

<ul>
  <li><a href="">Great Britain</a></li>
  <li><a href="">Germany</a></li>
  <li>
    <a href="">France</a>
    <ul>
      <li>
        <a href="">Paris</a>
        <ul>
          <li><a href="">Notre Dame</a></li>
          <li class="selected"><a href="">Parc des Princes</a></li>
          <li><a href="">Sacre Coeur</a></li>
        </ul>
      </li>
      <li><a href="">Rouen</a></li>
      <li><a href="">Lyon</a></li>
      <li><a href="">Marseilles</a></li>
    </ul>
  </li>
  <li><a href="">Sweden</a></li>
  <li><a href="">Poland</a></li>
</ul>

CSS:

.selected > :first-child {
  color: #f00;
  background-color: #999; 
}

This will style the a tag "Parc des Princes" red with a grey background.

Is there a way with css to target all a tags on the same level as the a tag inside the .selected li and the a tags in the parent levels? In other words I want to make every a tag relating to france and the a tag with france itself to have color: #f00;

The html must be kept intact cause I cant change it and it must be done with css only.

Cheers / Robin.

Answer 1

Sounds like you want to access the parent selector, which cannot be done using css alone, which you can read up on more here, however there are some other selectors which you can find handy : siblings,universal,etc

Answer 2

No. You cannot select parents with css. There is a W3C Working Draft 2 May 2013 but this is not supported by all browsers.