CODEWITHSUNDEEP
htmlcss
J. H
J. H

Reputation: 124

Remove specific class from class

<span class="electro-price">
    <span class="woocommerce-Price-amount amount">
        <bdi>
            <span class="woocommerce-Price-currencySymbol">
                CHF
            </span>
            59.90
        </bdi>
    </span> – 
    <span class="woocommerce-Price-amount amount">
    <bdi>
        <span class="woocommerce-Price-currencySymbol">
            CHF
        </span>
        79.90
    </bdi>
    </span>
</span>

I want to remove the class "woocommerce-Price-currencySymbol" but only the last one. So the first class has to display and the second class (79.90) should not be visible.

This is in a loop, and will be printed 40 times. There are also products with only 1 "CHF" attribute.

I tried already with nth-child. But it didn't worked.

Upvotes: 0

Views: 515

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

You can't directly use :nth-child or :last-child on the .woocommerce-Price-currencySymbol class because it is always the last element inside the <span> or <bdi> element. You have to use :last-child or nth-child on the parent (with class .woocommerce-Price-amount) like this:

span.woocommerce-Price-amount:last-child span.woocommerce-Price-currencySymbol {
  display:none;
  visibility:hidden;
}
<span class="electro-price">
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>59.90</bdi>
  </span> – 
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>79.90</bdi>
  </span>
</span>

If you want to show just the first currency info of the list you can use :not with :nth-child or :first-child like this to hide the other currency information:

span.woocommerce-Price-amount:not(:nth-child(1)) span.woocommerce-Price-currencySymbol {
  display:none;
  visibility:hidden;
}

/** or */

span.woocommerce-Price-amount:not(:first-child) span.woocommerce-Price-currencySymbol {
  display:none;
  visibility:hidden;
}
<span class="electro-price">
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>59.90</bdi>
  </span> – 
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>79.90</bdi>
  </span>
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>59.90</bdi>
  </span> – 
  <span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">CHF</span>79.90</bdi>
  </span>
</span>

Upvotes: 1

Related Questions