CODEWITHSUNDEEP
css
frenchie
frenchie

Reputation: 51937

merging css class definitions

I define fonts on their own like this:

.smallboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:11px;color:#3A63A5;}
.medregblue{font-family:Trebuchet MS;font-size:13px;color:#3A63A5;}
.medboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:13px;color:#3A63A5;}

I also define elemets that are recurrent such menu options or section titles like this:

.MenuOptions{float:right;margin-right:0px;}
.SectionOption{float:left;margin:10px 0px 0px 50px;}

So when I create divs, I often find myself writing this:

<div class="MenuOptions medboldblue">

I know I could merge the two classes but I like to have my fonts in one class and another class to handle positioning and such.

Is there a way in CSS to have all MenuOptions be of font medboldblue so that if I want to change the font from a medboldblue to a largeboldblue I do can that change without going through every MenuOptions div? I know I can easily do this with jquery and addClass but I was wondering if there a way to do this with pure CSS.

Thanks.

Upvotes: 1

Views: 510

Answers (2)

jeroen
jeroen

Reputation: 91734

Unless I misunderstand your question, you can very easily do that with css.

All the properties that you define in the first section are inherited (font, color), so you only need to apply your style to the parent / menu element and the styles will be inherited by all menu options.

When you decide to change the font class, you just have to change it for the menu.

Upvotes: 0

Bryan Downing
Bryan Downing

Reputation: 15472

No, you can't do that with pure CSS.

You could use SASS or LESS CSS.

Or you can add the styles from medboldblue to MenuOptions.

But really I would recommend reading about OOCSS if you want to learn about the best way to organize CSS.

Upvotes: 1

Related Questions