CODEWITHSUNDEEP
htmlcss
Robert Henry
Robert Henry

Reputation: 41

CSS Hide outer Span and show inner span

<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

Upvotes: 1

Views: 1754

Answers (5)

Reinstate Monica -- notmaynard
Reinstate Monica -- notmaynard

Reputation: 5490

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>

Upvotes: 0

castletheperson
castletheperson

Reputation: 33476

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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 2

Hunter Turner
Hunter Turner

Reputation: 6894

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>

Upvotes: 2

DaniP
DaniP

Reputation: 38252

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>

Upvotes: 4

Related Questions