How can I use/emulate regex-like backreferences in attribute selectors?

Question

What I want to do is write a selector that matches an arbitrary value in one place, then later requires a different value be equal to it. If [attr="value"] parsed "value" as a regex, then this would solve my problem:

*[class="(.+)"] *[class="if_\1"] {/* styles */}

Obviously I could just list each possible class individually, but that takes a great deal of convenience out of it.

Is this possible?

Is your question about CSS or about Javascript? The title says CSS, but the only tag is for Javascript. — Boaz
– Boaz, Commented May 11, 2014 at 13:20
Maybe you should redesign your code to not require this kind of magic. — John Dvorak
– John Dvorak, Commented May 11, 2014 at 13:29
@JanDvorak I already did. I just wanted to see if anybody else can make this approach work, because it would be a terser approach, and doubtlessly useful elsewhere. — twhb
– twhb, Commented May 11, 2014 at 15:04
“because it would be a terser approach, and doubtlessly useful elsewhere” – it would first and foremost require browsers to do a lot more work then they are doing already to see which elements match a selector … and is therefor totally not practical. — C3roe
– C3roe, Commented May 12, 2014 at 2:44

BoltClock · Accepted Answer · 2016-11-23 03:05:52Z

1

No, it's not possible. Attribute selectors are almost completely static and provide almost no dynamic matching functionality (beyond that of substring matches, which are still static and not dynamic pattern-based). They do not support anything like what you see in everyday regular expressions.

A stylesheet preprocessor such as Sass or LESS will allow you to generate the static CSS rules needed, but all that does is automate the manual task of listing all possible values individually, which proves my first point.

edited Nov 23, 2016 at 3:05

answered May 11, 2014 at 15:09

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

4 Comments

twhb Over a year ago

I don't think Sass, LESS, or any CSS-only preprocessor could help with this, not without a list of possible values, because you have to end up with plain old CSS.

John Dvorak Over a year ago

@twberger in every approach I can think of, you need to have this list or build it as the first step.

BoltClock Over a year ago

@twberger: That's the whole point, but I felt compelled to add a separate paragraph about preprocessors lest someone else go on about it like I wasn't aware they existed.

twhb Over a year ago

@JanDvorak same. I'm hoping one of us thinks of something different.

Collectives™ on Stack Overflow

How can I use/emulate regex-like backreferences in attribute selectors?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related