CODEWITHSUNDEEP
htmlcss
cyonder
cyonder

Reputation: 872

How to append a CSS rule to the another CSS rule

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>

Upvotes: 1

Views: 141

Answers (2)

GolezTrol
GolezTrol

Reputation: 116180

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; }

Upvotes: 2

Dryden Long
Dryden Long

Reputation: 10190

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.

Upvotes: 1

Related Questions