Using element's attribute value as a selector in CSS

Question

I've been trying to create an interactive SVG where changing certain custom attributes changes the SVG but I ran into a bit of a trouble - I want to switch between different air vent system modes by passing the name of the mode as an attribute and I couldn't find an easy way to hide or show different icons for those modes.

Basically the question is - is there any way to use the value of an element's attribute as a selector without knowing what the value is beforehand?

Consider this CSS code:

#root[Mode="some_mode"] [id=attr(Mode)] {
    /* .. style .. */
}

And this SVG code:

<g id="root" Mode="some_mode">
    <g id="mode1" />
    <g id="mode2" />
    <!-- and so on -->
</g>

This seems like the most obvious and logical way to do this but it doesn't work, so I resorted to a hacky way of doing this:

#root[Mode="standby"] #standby { visibility: visible; }
#root[Mode="comfort"] #comfort { visibility: visible; }
#root[Mode="economy"] #economy { visibility: visible; }
/* and so on for every mode that I have */

I know that this can be done using JS but the trick is that this SVG has to be JS-less (it's for a SCADA system that uses SVGs for custom graphics).

Thanks in advance for helping!

can you share the real SVG with all its content? probably there is another easier way to deal with this instead of selectors — Temani Afif
– Temani Afif, Commented Nov 27, 2019 at 12:36

Rounin · Accepted Answer · 2019-11-28 09:25:00Z

1

Since CSS is declarative I think the correct (albeit verbose) approach really is:

[Mode="standby"] #standby,
[Mode="comfort"] #comfort,
[Mode="economy"] #economy {
  visibility: visible;
}

edited Nov 28, 2019 at 9:25

answered Nov 28, 2019 at 9:16

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SamTheT Over a year ago

well, sadly, is seems like it really is; accepting your answer as solution

Rounin Over a year ago

Notwithstanding, your CSS syntax suggestion of [id=attr(Mode)] (and variations (such as [id$=attr(Mode)]) is a very smart one. The CSS attr() function will be much more useful when it (eventually) evolves. The latest info I can find on it is here: drafts.csswg.org/css-values-4/#attr-notation

Collectives™ on Stack Overflow

Using element's attribute value as a selector in CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related