#text won't disapear, even with complex CSS selectors [duplicate] - css

Question

This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 1 year ago.
I searched a lot here and I do not think there is already an answer.
Only in CSS :
I want the first woocommerce-Price-amount span to be the only one displayed. I can display: none the second but the – which is considered as "#text" by the console won't disapear.
So I have something like :
ARTICLE
160.00€ –
The – is making me crazy...
<span class="price">
<span class="woocommerce-Price-amount amount">
160.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
–
<span class="woocommerce-Price-amount amount">
1 260.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
</span>
Every changes I made sure that nothing overwrite my CSS lines.
I tried text-indent: -999px, color: transparent the parent and color: black the child, and more but nothing works...
Thank you !

Answer 1

You could simply set the font-size of the .price span to 0, and then override this in the amount span, as shown in this snippet below:
span.price {
font-size: 0;
}
span.woocommerce-Price-amount.amount {
font-size: initial;
}
span.woocommerce-Price-amount.amount:nth-of-type(2) {
display: none;
}
<span class="price">
<span class="woocommerce-Price-amount amount">
160.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
–
<span class="woocommerce-Price-amount amount">
1 260.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
</span>
Of course, this doesn't remove the dash it just, effectively, hides it.