0

I'm trying to use and parse XML with JS and format and display it with HTML and CSS for the first time, and my XML sheet, "math_functions.xml", is a list of math operations and functions, listing their names, how to use them in an example expression, and their descriptions.

An example of the expression is "x + y" or "x % y" or "| x |" for addition, remainder, and absolute value.

I would like to make it so that when I print it out onto the web page, all the variables (e.g. "x" and "y") would be a different color than the operation or function symbols to distinguish both groups.

Is there a CSS selector that can select all of a certain text, like "x" and "y", inside an element?

I could use JS to go through each expression and make style each variable one at a time, but that would be much more inconvenient.

Thanks.

Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94

3 Answers3

4

Sorry, to my knowledge, pure CSS doesn't have a way of selecting elements based on text. Attribute values, yes, but innerText or innerHTML, no. See CSS "inner-html" technique?

Community
  • 1
  • 1
Palpatim
  • 9,074
  • 35
  • 43
3

You would need to use Javascript to do this. CSS has no native support for selection based on inner html of an element. You could use JS to wrap the desired parts of the text in a span perhaps and style/target that way.

steve
  • 2,469
  • 1
  • 23
  • 30
1

Although not necessarily less of a hassle than JavaScript, your project sounds like something that might be suited for XSLT. You can select substrings from within a node with XSLT.

AnalogWeapon
  • 550
  • 1
  • 4
  • 16