-1

How to reach li.one only when li.two has .active using CSS? 

<ul>
    <li class="one"></li>
    <li class="two active"></li>
    <li class="three"></li>
</ul>

I try this but it does not work.

<style type="text/css">
    li.one ~ li.two.active{
        /* to do something */
    }
</style>
abdulmanov.ilmir
  • 1,325
  • 4
  • 15
  • 24
  • 2
    You can't access previous sibling in CSS. Check this [Question](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) for more details. – Mohammad Usman Feb 16 '17 at 08:55
  • There is no `previous sibling` selector in css. Use js – Abhishek Pandey Feb 16 '17 at 08:56
  • here is a similar answer: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector – Miquel Canal Feb 16 '17 at 08:59
  • @Muhammad Usman - I have created a solution that targets the previous sibling to the active class in this list. It is doable - by virture of targetting all lis and then targetting the active li and its adjacent siblings.its just less good than targetting using js / jquery etc. because in effect you are targetting the chosen li by exclusion. But it is definitely possible to do – gavgrif Feb 16 '17 at 09:17
  • @Abhishek Pandey -- I have created a solution that targets the previous sibling to the active class in this list. It is doable - by virture of targetting all lis and then targetting the active li and its adjacent siblings.its just less good than targetting using js / jquery etc. because in effect you are targetting the chosen li by exclusion.But it is definitely possible to do. – gavgrif Feb 16 '17 at 09:18

1 Answers1

0

Set all li's to a given color, set li.active and its adjacent siblings to another color. Means that the first li is different to the others. So effectively you are deselecting all other li's after the active class.

You can manipulate the order and li + li styling to allow different number of lis before and after the active class - i also did a version where I have the active class on li3 and was able to get li2 to be the different color.

#list1 li{color:red}
#list1 li.active, #list1 li.active + li, #list1 li+li{color:green}

#list2 li{color:green}
#list2 li + li {color:red}
#list2 li.active, #list2 li.active+li{color:green}
<ul id="list1">
    <li class="one">one </li>
    <li class="two active">two</li>
    <li class="three">three</li>
    <li class="four">four</li>
</ul>

<ul id="list2">
    <li class="one">one </li>
    <li class="two ">two</li>
    <li class="three active">three</li>
    <li class="four">four</li>
</ul>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • @Esko - answer 2 is a bit more creative - check it out. CSS only solution :) – gavgrif Feb 16 '17 at 09:08
  • Most of the time `active` class is added dynamically and its position is not known in advance. You have added hard coded styles that work only when `active` class is added on one particular item. If I move `active` class to another item, it stops working. Check this [Fiddle](https://jsfiddle.net/Muhammad_Usman/53szojqu/) – Mohammad Usman Feb 16 '17 at 10:25
  • @Muhammad Usman - I agree that this solution is neither the best nor most useful and is flawed in the scenario you describe - however my point to doing it was to demonstrate that in certain circumstances it is possible to select an element higher in the ul than the active class. The provided list from the OP was not dynamic and the solution worked within the parameters provided. I personally would not use this solution - but was intrigued how to select a higher element. And to be fair - I put the active class where you have it too and got the same result. But if there are only 3 options.... :) – gavgrif Feb 16 '17 at 12:17