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

Steps for using selenium to select a radio button

reverting the effects of a javascript animation

Single-line form with labels positioned above the input fields

How to vertically align text within a container in Bootstrap?

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Designing Material UI Button Styles

Struggling with Responsive Design Challenges with Grid Material UI?

Styling with CSS 3: Adding Shadows and Rounded Edges

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

Combining keyframe properties in a more efficient way using less code

Tips for creating an adjustable background image size

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Utilizing multiple classes in HTML for a button element

"Exploring the Power of Internal Hyperlinks in HTML

Incorporate the HTML CTA on top of the background image within the email template

The text is obscured by the overlapping div within the parent div

What could be causing my linear background to behave in this unusual manner?

Enlarge the div with a click

The functionality of Google Maps code is limited on Android devices because the map feature is not available

What is the most efficient method for incorporating fonts.googleapis.com into CSS files for use on both HTTP and HTTPS pages?