Make the only one CSS style instead multiple css styles

Question

I have multiple css styles:

form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red}
form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red}
form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red}
form#reply_form-c4r1.odgovor div#cmtforms-c4r1 input{color:red}

and I want to make the one css style like this

form[id^="reply_form-c"]r1.odgovor div[id^="cmtforms-c"]r1 input{color:red}

But this code, doesn't work..

What I missed?

`[id^="..."]r1` will not work. `[id^="..."][id$="r1"]` will. — Rene van der Lende, Feb 10 '23 at 00:24

score 0 · Answer 1 · answered Feb 09 '23 at 22:54

0

Just give the elements a class and use that not all the id's etc. class="red-block" and then in CSS .red-block{color:red;}

Example:

.red-block {
  color: red;
}

<div class="red-block">Howdy</div>
<span class="red-block">spanner</span>
<button type="button" class="red-block">Make me do it</button.

answered Feb 09 '23 at 22:54

Mark Schultheiss

32,614
12
69
100

OK, good thought but I can't use that. I need to use wildcard css like I show in my example. – Aleksandar Feb 09 '23 at 23:02
That then becomes a different question and is a duplicate: here is a good answer: https://stackoverflow.com/a/11496658/125981 – Mark Schultheiss Feb 09 '23 at 23:09
That also show the "endswith" example – Mark Schultheiss Feb 09 '23 at 23:11
And here is a "contains" example: https://stackoverflow.com/a/12157322/125981 – Mark Schultheiss Feb 09 '23 at 23:12
FWIW and IMHO using ID's in any way to style is kind of an anti-pattern. – Mark Schultheiss Feb 09 '23 at 23:13

Make the only one CSS style instead multiple css styles

1 Answers1