CODEWITHSUNDEEP
css
jbailie1991
jbailie1991

Reputation: 1345

CSS: wildcards within css selector

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

Upvotes: 0

Views: 84

Answers (1)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 4

Related Questions