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
– Rene van der Lende, Commented Feb 10, 2023 at 0:24

Mark Schultheiss · Accepted Answer · 2023-02-09 22:54:57Z

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 9, 2023 at 22:54

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

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

5 Comments

Aleksandar Over a year ago

OK, good thought but I can't use that. I need to use wildcard css like I show in my example.

Mark Schultheiss Over a year ago

That then becomes a different question and is a duplicate: here is a good answer: stackoverflow.com/a/11496658/125981

Mark Schultheiss Over a year ago

That also show the "endswith" example

Mark Schultheiss Over a year ago

And here is a "contains" example: stackoverflow.com/a/12157322/125981

Mark Schultheiss Over a year ago

FWIW and IMHO using ID's in any way to style is kind of an anti-pattern.

Collectives™ on Stack Overflow

Make the only one CSS style instead multiple css styles

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related