0

I have a list of prices which automatically increment the class, for example the first one is called '.hikashop_product_price_0' and all others are then _1, _2 etc...

I want to be able to hide all of the prices apart from the first one, I've tried something like the following but it's not working:

.hikashop_product_price.hikashop_product_price_* {display: none;}
.hikashop_product_price.hikashop_product_price_0 {display: block;}

The HTML Markup looks something like:

<div class="hikashop_product_price_full hikashop_product_several_prices">
    <span content="33.96" itemprop="price" class="hikashop_product_price hikashop_product_price_0">£ 28.30</span>
    <span class="hikashop_product_price_per_unit"> each</span>
    <br>
    <span content="43.188" itemprop="price" class="hikashop_product_price hikashop_product_price_1">£ 35.99</span>
    <span class="hikashop_product_price_per_unit"> each</span>
    <br>
    <span content="41.316" itemprop="price" class="hikashop_product_price hikashop_product_price_2">£ 34.43</span>
    <span class="hikashop_product_price_per_unit"> each</span>
    <br>
    <span content="52.068" itemprop="price" class="hikashop_product_price hikashop_product_price_3">£ 43.39</span>
    <span class="hikashop_product_price_per_unit"> each</span>
    <br>
    <span content="49.956" itemprop="price" class="hikashop_product_price hikashop_product_price_4">£ 41.63</span>
    <span class="hikashop_product_price_per_unit"> each</span>
</div>
  • Could you add the HTML markup please? Not all of it, just just the first few lines – Lodder May 20 '16 at 10:33
  • Are you looking for something like this: jsfiddle.net/zx2cqp5w ? – Lodder May 20 '16 at 10:35
  • Yes, looking at similar to the jsfiddle, but want to hide all of the items apart from 'hikashop_product_price_0' – RustyJoomla May 20 '16 at 11:00
  • So like this: jsfiddle.net/zx2cqp5w/2 – Lodder May 20 '16 at 11:01
  • I've added the HTML markup above, as they're not shown as list items – RustyJoomla May 20 '16 at 11:39
1

It's simple as that: just correct your own rule to be like this

.hikashop_product_price {display: none;}
.hikashop_product_price.hikashop_product_price_0 {display: block;}

so first selector hides everything and second shows your specific item

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.