CSS Following Siblings Selector

Question

~ is for the following sibling selector.

How could il select the class .content in reference to the class .select ?

HTML

<ul>
  <li> <a>content</a> </li>
  <li> <a class="select">selected li</a> </li>
  <li> <a>content</a> </li>
</ul>
<div class="content">
  selected content
<div>

CSS (not working)

ul > li > a.select ~ .content {
  /* something */
}

Answer 1

It's unfortunately not possible with CSS, but you could use JQuery, i.e. something like

<script type="text/javascript">    
    $(".selected").parent().parent().siblings(".content").css("color", "red");
</script>

• $(".selected") you start at 'a' tag
• .parent() move to parent 'li'
• .parent() move to parent 'ul'
• .siblings(".content") matches all siblings of the 'ul' you are currently at with class #content'
• .css("color", "red") do whatever fancy css you like ;)