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.