CODEWITHSUNDEEP
css
Ris
Ris

Reputation: 1164

Using CSS to replace text dynamically

In following HTML snippet, I am trying to modify the text dynamically using CSS.

<li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
                <span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
                <h4 class="text" role="none">On Road</h4>
                    <span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</li>

My CSS snippet is,

#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active  h4 {visibility: hidden;}
#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active h4:before {visibility: visible;position: absolute;content: "Complete";}

So my ask is without using JS/Jquery to dynamically change the text based on "ui-state-active" class presence. CSS looks alright but it ain't working.

If above CSS executes correctly, it should replace "On Road" to "Complete"

Upvotes: 0

Views: 543

Answers (1)

Paulie_D
Paulie_D

Reputation: 115061

Your CSS is incorrect, the h4 is not a child of the span it's a sibling so use +, like so

ul {
  list-style: none;
}

li#onroad span.ui-state-active+h4 {
  visibility: hidden;
}

li#onroad span.ui-state-active+h4:before {
  visibility: visible;
  content: "Complete";
}
<ul>
  <li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
    <span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
    <h4 class="text" role="none">On Road</h4>
    <span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</ul>

Upvotes: 3

Related Questions