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/*
}

(..)

Oded · Accepted Answer · 2011-01-22 10:14:56Z

2

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

answered Jan 22, 2011 at 10:14

Oded

501k102 gold badges900 silver badges1k bronze badges

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

Comments

Rakesh Juyal · Accepted Answer · 2011-01-22 11:20:16Z

1

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

answered Jan 22, 2011 at 11:20

Rakesh Juyal

37k74 gold badges179 silver badges218 bronze badges

Collectives™ on Stack Overflow

OO like behaviour in CSS: inheritance possible?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related