CODEWITHSUNDEEP
css
anony_root
anony_root

Reputation: 1527

Are there any tricks to set in css inheritance from another object or rule?

I'm looking for some trick(s) to make style inherited from another object/class/id. Simple trick: use classes, but are there another ways to specify style of another rule?

Sorry for explanation.. I'm looking for something like: .st1 {font-size:17pt;} .st2 {-moz/ms/webkit-extends: '.st1';}?

Actually, I'm not really looking for it (because I use classes), just interested in.

Upvotes: 1

Views: 94

Answers (3)

Starx
Starx

Reputation: 79031

Rather than searching for tricks, You are looking for CSS extension libraries like

They do not exactly give a way to do it like you want, but provide even better one. Like

.st1 {font-size:17pt;} 
.st2 {
    .st1;
}

When the website is launched, these style declarations are compiled and optimized into a valid CSS document.

Upvotes: 2

ajax333221
ajax333221

Reputation: 11774

With pure CSS, no

But if I understand you right:

  • you have a class X
  • then you want class Y to have everything of class X plus additional overwriting/new content?

I think you can try JavaScript to find every object with class Y and prepend the class X

Something like:

//disclaimer: I haven't tested it
var objs=document.getElementsByTagName('*');//getElementsByClassName, not very crossbrowser

for(var i=0,len=objs.length;i<len;i++){
    var temp=objs[i].className;
    if((" "+temp+" ").indexOf(" classY ")==-1){//spaces are important
        objs[i].className="classX "+temp;
    }
}

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

CSS inheritance relays on the DOM structure, so unless the involved elements are having a descendant / ancestor relationship, no, CSS offers no such functionality.

you can, regardless, use libraries like LessCSS to implement template-like placeholders for property values, thereby turning your CSS into a dynamic stylesheet.

Upvotes: 0

Related Questions