Chaining CSS rules

Question

I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:

.background_highlite{
    background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
    background-color: rgb(201, 179, 156);  /*Moose Mousse*/
}

Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.

Something like:

textarea{
    height:50px;
    background-color: background_highlite  /* want to feed forward to keep the rgb in one place */
}

Is this possible with CSS?

short answer: no, not with plain css

knittl
– knittl

2010-07-11 16:39:55 +00:00
Commented Jul 11, 2010 at 16:39 — knittl
– knittl, Commented Jul 11, 2010 at 16:39

Ned Batchelder · Accepted Answer · 2010-07-11 15:53:52Z

4

People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.

answered Jul 11, 2010 at 15:53

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

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

1 Comment

Ned Batchelder Over a year ago

Yes, there seem to be a number of these now. Less and Clever were the two I could re-find with Google! :)

Ned Batchelder · Accepted Answer · 2010-07-11 15:51:46Z

3

You can assign all the elements the same class, and then set the background color in the class's CSS:

<textarea class="background_shadow">blah</textarea>

Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:

<textarea class="background_shadow another_class something_else">...</textarea>

answered Jul 11, 2010 at 15:51

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

Comments

Quentin · Accepted Answer · 2010-07-11 15:49:12Z

0

Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.

answered Jul 11, 2010 at 15:49

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

tcooc · Accepted Answer · 2010-07-11 15:52:04Z

0

Sorry, no. CSS does not support variables, or chaining.

however, there is a javascript library that allows that. http://lesscss.org/

answered Jul 11, 2010 at 15:52

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Comments

Aaron Yodaiken · Accepted Answer · 2010-07-11 15:52:19Z

0

The best you can do would be

.hilight textbox {
  background: black;
}
textbox {
  color: pink;
}
.background_shadow {
 background: grey;
}

Or, of course, you could add the .hilite class to your div.

answered Jul 11, 2010 at 15:52

Aaron Yodaiken

19.7k33 gold badges110 silver badges189 bronze badges

Comments

gaRex · Accepted Answer · 2010-07-11 16:16:11Z

You have two options to work with:

Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.

For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.

In this method you can always use some human readable rule like: .blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.

Also what I realy like in preprocessors is that you can right code, as here:

.specialClass extends .basicClass {} // see more at extends
.selector { a { display: block; } strong { color: blue; } } // see more at children
or what you needed is vars { $path = ../img/tmpl1/png; $color1 = #FF00FF; $border = border-top: 1px solid $color1; } // see more at vars

Collectives™ on Stack Overflow

Chaining CSS rules

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related