CSS: wildcards within css selector

Question

Im trying to target a number of specific disabled textboxes to alter the color of the text. the format of the ID is:

id="jc-cr-lmid-Total-1-RangeFr"

Where the number changes from 1-5 depending on the amount of textboxes on the screen.

Is there any way to insert a wildcard for the number while keeping the -RangeFr section of the selector?

I have tried:

id*=["jc-cr-lmid-Total-*-RangeFr"]:disabled{
  //Change text color
}

But this hasn't worked

David Thomas · Accepted Answer · 2014-08-27 10:32:33Z

4

Yes, sort of; you can use attribute-starts-with and attribute-ends-with notation:

[id^="jc-cr-lmid-Total-"][id$="-RangeFr"]:disabled{
  //Change text color
}

Note, though, that this allows any sequence of characters between the required start and end, as CSS has no concept of regular expression, so it'll match:

id="jc-cr-lmid-Total-1-RangeFr"
id="jc-cr-lmid-Total-1000-RangeFr"
id="jc-cr-lmid-Total-anyOtherSequenceOfCharacters-RangeFr"

In all honesty, you'd be better off simply using a class for this, which would be far more simple and reliable.

References:

CSS attribute selectors.

edited Aug 27, 2014 at 10:32

answered Aug 27, 2014 at 9:48

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

5 Comments

Kheema Pandey Over a year ago

this answer is more appropriate here.

jbailie1991 Over a year ago

I would use a class but its production code and im under strict instruction to make as low an "impact" change as possible. Tested the above, worked, good answer

David Thomas Over a year ago

Honestly? I think a class-name would be lower impact than leaving a selector in your production site that's inherently, unavoidably, open to accidental misuse.

jbailie1991 Over a year ago

Under any other circumstance i would agree, but unfortunately its another case of non technical BA's dictating what the code base should look like. They see adding a class to each item as too many changes to too many files vs one or two extra selectors in an already gigantic css file

David Thomas Over a year ago

Constraints are unavoidable, despite their occasional silliness and flaws; I would suggest documenting the refusal to allow use of a class, though, as the approach is unusable in older browsers and prone to misuse (accidental or otherwise); if this leads to an insecurity I suspect you, rather than your manager(s), will be blamed.

Collectives™ on Stack Overflow

CSS: wildcards within css selector

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related