0

Is there a way (using CSS) to replace an image based on the text in the span for a specific div class.

For example in below span the value is 5KG. I want to replace it with the icon.

HTML

<div class="brand-amenity-value economy YV" style="height: 70px;"><span class="amenity-value"><span>5KG</span></span></div>

Link of the icon https://dxbooking.etihad.com/dx/EYDX/4.5.60-148.MMCOPY4.5.60-147/fonts/excess_baggage_5kg.svg

Ayaz Moeen
  • 41
  • 9
  • 1
    Unfortunately, it's not possible to do this only with CSS. You have to use JavaScript. – Vaibhav Feb 03 '21 at 13:49
  • There is no CSS selector that can select an element based on its text content. You could either do this client-side with JavaScript, or server-side when the HTML is generated. – Turnip Feb 03 '21 at 13:49
  • @Vaibhav is correct. The only other option is to use an element attribute to store the content. Then you can use a CSS selector to check the content of the attribute. See this post for the solution: https://stackoverflow.com/a/41281583/13303628 – TerminalVelocity Feb 03 '21 at 13:50
  • JS is the way (https://codepen.io/imechemi/pen/LYbpbwg) – Tenzin Chemi Feb 03 '21 at 13:57

0 Answers0