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 */
}

@Danield: There is no parent selector. There is also no guarantee that the subject selector can be used in CSS. See my comments on the answer to http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — BoltClock, Dec 18 '13 at 09:55

score 1 · Answer 1 · answered Dec 18 '13 at 10:14

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 ;)

score 0 · Answer 2 · answered Dec 18 '13 at 10:08

0

There's currently no way in CSS to select the class .content in reference to the class .select.

However if you change your markup a little you can do something similar to what you're trying to do using the target pseudo-class

FIDDLE

answered Dec 18 '13 at 10:08

Danield

121,619
37
226
255

I'm working on ember.js and I have generated `.select` class. I've planned to use css only, but no way to do that in css3, thanks Danield – JulienGenoud Dec 18 '13 at 10:10
You may want to read over your own answer again. It's not pure CSS if you have to change the HTML to accommodate the CSS. – BoltClock Dec 18 '13 at 10:14

CSS Following Siblings Selector

2 Answers2