CSS for all cases with colon in id-selector

Question

this is a question related to a case mentioned here: Handling a colon in an element ID in a CSS selector

I have some code which contains footnotes which are noted 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 the css to get all cases into one rule (I don't want to make a endless list for all potential footnotes.

Thanks in advance Florian

score 3 · Answer 1 · answered Nov 12 '12 at 12:23

3

Use an attribute selector instead:

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

By the way you should be selecting sup elements and not sub elements.

answered Nov 12 '12 at 12:23

BoltClock

Using a class would probably be better. Not sure if browsers make use of whatever mapping for IDs to elements they have in case of the attribute selector. – ThiefMaster Nov 12 '12 at 12:25
@ThiefMaster: What do you mean in your second sentence? – BoltClock Nov 12 '12 at 12:27
`#id` probably uses a hashtable-like lookup internally. However, for an `[id^='..']` selector that might not work and at least require iteration over all elements that have an ID. – ThiefMaster Nov 12 '12 at 12:28
Ah I understand. I doubt they have mappings for IDs in attribute selectors really, but I'm not too concerned about any effect it would have on performance either. Some browsers do type checks early so it should be easy to first limit it only to `sup` elements in this case before checking their ids. – BoltClock Nov 12 '12 at 12:30
@ThiefMaster: I'm not free to choose. I get the data in the specified way. – giebellasche Nov 12 '12 at 12:30
@BoltClock: Thanks for your answer! Obviously you're also right with the objection against my selection :-) – giebellasche Nov 12 '12 at 12:36

1 Answers1