Create a single CSS style rather than using multiple CSS styles

Question

Create a single CSS style rather than using multiple CSS styles

I currently have multiple CSS styles applied:

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}

However, I would like to combine them into a single CSS style like this:

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

Unfortunately, the new code doesn't seem to work. Any ideas on what might be missing?

Looking for some guidance.

css css-selectors

Answer 1

Answer №1

To style elements, simply assign them a class and use that instead of individual IDs. For example, you can give elements the class "red-block" and then style it in CSS with .red-block{color:red;}.

Here's an illustration:

.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.

Answer 2

To style elements, simply assign them a class and use that instead of individual IDs. For example, you can give elements the class "red-block" and then style it in CSS with .red-block{color:red;}.

Here's an illustration:

.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.

Create a single CSS style rather than using multiple CSS styles

Answer №1

Similar questions

Reducing the Size of Sprite Images on Websites

Strange circle border appearance in Android / Chrome device

See-through navigation bar custom-made for materializecss

What is the best way to enable CSS IntelliSense for a Nuxt project?

An autocomplete CSS editor with Firebug-like features

Move the footer to the bottom of the content

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

How can I display an image caption within a lightbox using jQuery?

Creating a Navigation Bar with a Dropdown Menu in HTML

Toggle class to a div upon clicking menu item

Get rid of the paper border in Material-ui

Matching Figures to their Descriptions

Slider Volume with jQuery

Enhancing collapsible list headers in jquery mobile with checkboxes

"Troubleshooting problem with padding-right in Internet Explorer when displaying background image within

Issue with Bootstrap 4 nav bar where the first nav item is not highlighted and a problem with scrollspy

How can I utilize the LED flash on a Windows Phone using WinJS?

Aligning a div with absolute positioning vertically

What is the most effective method for incorporating a floating section next to a Susy gallery?

Splitting the page into four sections with a unique H layout using CSS styling