CSS Hide outer Span and show inner span - html

Question

<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Working in WooCommerce I want to hide "as low as" which is contained in an outer span yet show the price which is contained within an inner span.
If someone could guide me as to how to do this.
Thanks

Answer 1

You can modify the font-size value to hide all text and then show the inner span text this way:
.price {
font-size: 0;
}
.price span {
font-size: 18px;
}
<span class="price">
as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>

Answer 2

You can use visibility: hidden; on your outer <span>, and visibility: visible; on your inner <span>
.price {
visibility: hidden;
}
.woocommerce-Price-amount {
visibility: visible;
}
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>

Answer 3

Visibility can help you here.
.price {
visibility: hidden;
}
.price > span {
visibility: visible;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
If removing the space taken by the hidden text is also require then the font-size:0 is an option in some browsers provided you reset the inner text back to the required size.
.price {
visibility:hidden;
font-size:0;
}
.price > span {
visibility:visible;
font-size:1rem;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>

Answer 4

Do the proper thing, and make your HTML reflect your intentions. If you want to be able to only style "as low as", then wrap that text in it's own <span> and hide that instead. This will be much cleaner than trying to select a text node with CSS and suffering from the CSS effecting the siblings also.
.hidden {
display: none;
}
<span class="price">
<span class="hidden">as low as</span>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>

Answer 5

The best solution is to change the HTML, as in 4castle's answer.
However, if for whatever reason you cannot change the HTML structure, but you can change the text content and the CSS, and also have a way to set the class on an object as needed (I used a hacky little piece of JS to toggle, but it could also be set during generation of a static page), you can use the ::before pseudoelement to display the desired text:
function handleClick(what) {
what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}
.asLowAs::before {
content: "as low as ";
}
<span class="price asLowAs" onclick="handleClick(this)">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>