Question

I’m developing a website and in some pages of this website there are some services coupled with their related prices (I’m using WordPress as CMS).

I would to color in a different manner all the prices and I would to know if exists some automatic way to do this, for example using Javascript or simply using a specific CSS rule.

The alternative could be insert manually all the prices in an html tag like “<span class='price'>...</span>” but for me it would me a bad and boring way 😉

Thanks

Answer 1

Your HTML is actually a mess where things are very difficult to trace back. Each paragraph seems to have its own div – that’s a no-no, the p tag exists for a reason. Also, all of these divs have no way to be identified individually, meaning that you can never get to the one you need.

The best way here, honestly, is just to put that span around every price you find.

You could always track down all the strong elements since only they are used next to prices, but it could bug out other uses of strong tags elsewhere (if you ever have any). Since it doesn’t seem like CSS has a way to find the parent element, you would have to do this through JS anyway:

var pricedivs = document.getElementsByTagName("strong");
for (var i = 0; i < pricedivs.length; i++) {
  pricedivs[i].parentNode.className = "price";
}

And associated CSS:

.price { color: red; }
.price strong { color: black; } /* We only want the text beside the strong tag, so set the style back */

The effect is that all text that is around text with a strong tag will be colored red.