Using regular expressions in CSS to hide text, is it possible?

Question

Is it possible to use regular exprssions in css to selectively hide text?

I have some text

Product Pack: pack of 50 +£20.00

that I would like to display as with the monetry amount removed

Product Pack: pack of 50

Can I add to CSS a regular expression that twould do that?

Answer 1

Regular Expressions can't be used in CSS; To accomplish what you're trying to do, you'll either need to process your HTML with javascript (which supports Regular Expressions) or on the server side.

---

You could use CSS Selectors and some HTML as well; if you can surround your money field like this:

<span>Product Pack: pack of 50 <span class="money">+£20.00</span></span>

You could write the following CSS to hide the monetized value:

.money {
    display: none;
}

Answer 2

You can´t use any kind of expressions in css.

Answer 3

CSS rules apply to DOM elements. A part of the text is NOT a separate element on a DOM tree by itself, therefore can not have separate style apply.

However, you can easily process the text on your back-end and insert appropriately-classed SPANs around text you want to highlight, and apply styles to those classes.

E.g. your HTML would look, after exiting your back-end processing, as:

<SPAN class="label">Product Pack</SPAN>: pack of <SPAN class="amount">50</SPAN> <SPAN class="price">+£20.00</SPAN>

(this is achieved using some easily written RegExp in whatever your back-end language is)

and then have CSS apply to those 3 classes

The limitation is of course that the page is either dynamically generated or pre-generated if it's a static HTML, or you need to do it on load via JS (I'd personally prefer back-end solution if I was implementing it)