~ 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 */ } 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> 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
.select class. I've planned to use css only, but no way to do that in css3, thanks Danield
You can obtain what you need without using JavaScript and leaving the HTML structure in your document as is by adding a new CSS rule, making use of the :has() relational pseudo-class which is being supported by all major browsers since the end of 2023 at least (see).
ul:has( > li > a.select) ~ .content { background-color: green; }<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>So here the needed CSS rule is:
ul:has( > li > a.select) ~ .content { ... } 
