I was looking to join 2 styles together to make a super style for easy use and customisation of my page.

Is it possible to define something like this?

.bold { font-weight: bold;}
.color1 {color: white;}

.boldColor {.bold; .color1;}

where .boldColor is effectively

.boldColor {font-weight:bold; color:white;}

I want this so that I can have styles thoughout the page and be able to easily change the colors in many places in 1 place. I'm currently using <p class=".bold .color1"> but some of my class defs are becoming long.


4 answers


CSS does not support such combination.

I think that you are setting yourself up to fail here, and completely missing out on the efficiency gains to be had from css.

For example, say your class .bold ends up being applied to three different sets of elements. (let's say, pullquotes, story intros and current page links). Now the client wants to make all the pullquotes italic rather than bold. You can't just change the properties of .bold in the stylesheet, because that would also change the intros and selflinks. Instead you would have to go through and change the classname on every occurrence in a pullquote in the HTML. That could be hundreds of edits.

However, if you name your elements semantically, e.g.

 <p class="pullquote">blah</p>
<p class="article-intro">blah</p>
<span class="currentpage">Ordering</a>

Then you have complete independent control over each set of elements. Modifying the design becomes a doddle and your stylesheet is easily managed.

Answered about 7 years ago by Richard Grevers
  • I wanted to name each element semantically, but instead of having to define the same color many times in a page, I wanted to have define the color just once, to make it easy to change. Besides find-replace would simplify any mass renaming. I dont think you really saw what I was after. Because for your example i could just remove the .bold from the joined pullquote and add in the italic in the css. (if this was possible of course) Kurru about 7 years ago
Gordon 0

You can't combine css styles like you asked. You can, however, apply more than one class per element. The class field is in fact a space-separated list of classes you want to apply.

For example:

.postit { background-color: #EEEE99; }
.priority { font-style: bold; color: red; }

<p class="postit">I'm just a normal post-it note</p>
<p class="postit priority">Look at me! I'm more important than that other post-it!</p>

There's no limit to how many classes you can apply to an element, but obviously try to be sensible and try to avoid going over 3 per element. Additionally, this doesn't work properly in IE6 (surprise surprise) which as far as I remember will only apply the first and last class in the list.

Answered over 6 years ago by Gordon
Kurru 0

answered on stack overflow


Answered about 7 years ago by Kurru

You can achieve this using Sass, which has its pros and cons. I love it but it's certainly not for everybody. Your "superclass" is known as a "mixin" in Sass, and would be defined like so:

    font-weight: bold

    color: #fff


This would produce the following CSS:

.boldColor {
    font-weight: bold;
    color: #fff;

You could make better use of Sass by doing the following

// colours all together in one place
!colourTravel= #ada
!colourFishing= #e00fa2

// define a more reusable mixin (best to keep this in a "tools" partial)
    font-weight= !weight
    color= !colour

// then use the mixin where you need it

After all this though, I believe the best advice has already been given by Richard, and I advise only trying something like Sass out once you've had a few professional years using CSS.

Answered about 7 years ago by nine_toes
  • yea well i've been using css for websites for like 5 years just as a hobby and had to make an xml website for a uni course so I was wondering about such improvements! Thanks Kurru about 7 years ago