OO like behaviour in CSS: inheritance possible?

Question

I have a simple border style say:

.border { /*content*/ } 

I want several other classes to inherit this border style. Can this be done in CSS only? Or do I need to specify it in HTML also?

I want:

.actionArea : .border { /*content */ } 

Or can this only be done in HTML like:

<div class="actionArea border"/> 

It would be very annoying if the latter is only possible.

Update
This works good enough, but still is a bit ugly:

.actionArea, .otherArea, .anotherArea { /*border specification */ } .actionArea { /*area specification/* } .otherArea { /*area specification/* } (..) 

Answer 1

You will need to use a CSS framework such as LESS for such a thing.

Answer 2

You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting

table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } 

Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css

Example copied from LESS

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; }