CSS for all cases with a colon in id-selector

Question

this is a question related to the case discussed here: Colon handling in element id in CSS selector

I have code that contains footnotes that are marked in this way <sup id="fnref:fn1">1</sup> and <sup id="fnref:fn2">2</sup> , etc.

In my css I know how to make a rule for each case

 sub#fnref\:fn1 {vertical-align: super} // or "\3A" instead of ":" to be correct sub#fnref\:fn2 {vertical-align: super} 

But how to write css to get all cases in one rule (I don’t want to do an endless list for all potential footnotes.

Thanks in advance Florian

Answer 1

Use an attribute selector instead:

 sup[id^="fnref:fn"] {vertical-align: super} 

By the way, you should select sup elements, not sub .