CSS Change "content" of previous sibling's after

Asked Aug 25 '16 at 05:19

Active Aug 25 '16 at 05:33

Viewed 27 times

I have the following html structure ( i cannot change , generated by JS ) :

<ul>
<li>
  <a>
    <span class="current-info">Step X: </span>
    <span class="number">1.</span>
    <span class="booking-icon">Date</span>
  </a>
</li>
<li>
  <a>
    <span class="current-info">Step X: </span>
    <span class="number">2.</span>
    <span class="calendar-icon">Date</span>
  </a>
</li>
...

And class "number" has the following css by default:

#bds-bf.wizard > .steps > ul > li.current > .number:after{
content: '\f2b4';
font-family: FontAwesome;
}

Class "number" is repeated many times, so i cannot change content based on it. What i want to do is change the value of

#bds-bf.wizard > .steps > ul > li.current > .number:after

based on its sibling's class , so for example if it found .booking-icon class in the next sibling it should make content like:

content: "\f0f9'

How can i achieve this with css selectors without using Javascript ?

UPDATED: JSFiddle example: https://jsfiddle.net/s4wje415/

edited Aug 25 '16 at 05:33

asked Aug 25 '16 at 05:19

Ahmed Yusuf

Can you create fiddle for testing purposes? Thanks – hdotluna Aug 25 '16 at 05:23
I believe you cannot find the previous class in css like `.booking-icon < .number:after` **it is not working**. What you can do is finding the next sibling by `+` – Zay Lau Aug 25 '16 at 05:26
http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector – Abhishek Pandey Aug 25 '16 at 05:27
@HermLuna I updated with a jsfiddle – Ahmed Yusuf Aug 25 '16 at 05:35
@AbhishekPandey i understand that it's not necessarily done by selection previous but some other tricks like siblings check could make it work , can't figure out how yet – Ahmed Yusuf Aug 25 '16 at 05:36
@ZayLau can i find next sibling but "select" the current one , not the next ? – Ahmed Yusuf Aug 25 '16 at 05:38
I have updated your fiddle https://jsfiddle.net/s4wje415/1/ , take a look, may it can help you. – Abhishek Pandey Aug 25 '16 at 05:43

CSS Change "content" of previous sibling's after

0 Answers0