How to append a CSS rule to the another CSS rule

Question

This is a simple question. However, I couldn't find an answer after 10 minutes search. I would like to explain my question with examples, so you can understand what I am exactly talking about.

Let's say there is a div tag with an id and it has also some text inside:

<div id="text">Hello World</div>

and I also have css rule which will turn the text into red.

.makeRed{
   color: #FF0000;
}

The question is I want to make the text red in my div tag. I can simply do it like this:

<div id="text" class="makeRed">Hello World</div>

Instead of doing it, is there another way to make that text turn to red? Because if I keep adding makeRed rule to my every div that I need, it will turn my html into garbage. So I wonder if there is any way to do it clearly. I would like to use that way for "clearfix" method for some of my divs.

Whenever I need clearfix, I do like this and this is bad:

<div class="clearfix">
   <div id="text">Hello World</div>
</div>

What does .makeRed signify? Should makeRed be called something more semantic like error-message? If you name your classes for what they mean not how they look you might end up with more descriptive and organized css/html. — Matthew
– Matthew, Commented May 7, 2015 at 17:24
No, that's specifically what classes are for, to define visual characteristics of html elements that share something in common in meaning (semantics). Unless you want every div to have red text (probably not) or you want to maintain a horrendous list of id selectors in your CSS file, or all of these divs are in a container element that you could style, then continue to use classes, and like others have said, make your class more meaningful. — howderek
– howderek, Commented May 7, 2015 at 17:27

GolezTrol · Accepted Answer · 2015-05-07 17:26:25Z

2

The question is: which text do you want to make red, and why?

If you want the text of all your divs red, you can just write

div{ color: red; }

If it's just for, say, an error message, I would add the class 'error' rather than 'red'. That way, you can make the HTML more semantic. You still have to add a class, but it has more meaning:

.message.error { color: red; }

answered May 7, 2015 at 17:26

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

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

Comments

Dryden Long · Accepted Answer · 2015-05-07 17:25:59Z

1

You can add the ID of your div to your css like so:

.makeRed, #text{
    color: #FF0000;
}

You can separate targets by commas to include multiple different elements in the style. This will maintain the styles applied to .makeRed and apply to your #text div.

answered May 7, 2015 at 17:25

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

1 Comment

cyonder Over a year ago

looks like this is what I am looking for but it still doesn't work in the way you told me.

Collectives™ on Stack Overflow

How to append a CSS rule to the another CSS rule

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related