2

Is there any way to reference another class in an external style sheet? Take my code as an example. Say I want to turn the button red when it's hovered over; I'm aware that I could just use background:#fff, but is there a way I could use another class as the style for this selector? (No javascript, just css and/or html)

.red {
    background: #f00;
}
button {
    background: #000;
}
button:hover {
    /* Reference another class */
    .red; ???
}

EDIT: I want the button to inherit the style(s) of the red class when it is hovered over.

Improve this question
11
  • 1
    No, but there are countless ways to achieve the same result. You might also be interested in a preprocessor like LESS/SASS. Commented May 16, 2014 at 20:48
  • See this post: stackoverflow.com/questions/10483323/… Commented May 16, 2014 at 20:49
  • 1
    Take a look at a CSS pre-processor like LESS: lesscss.org Commented May 16, 2014 at 20:49
  • I am not sure if I understand your question, but may try this instead .red:hover { background: #whatever; } Commented May 16, 2014 at 20:51
  • Yes, I found this question hard to word. Perhaps that is why it was hard for me to search for an answer. Commented May 16, 2014 at 21:15

2 Answers 2

Reset to default
2

This is currently not possible without any preprocessors such as Less. There is however a quite new proposal to implement CSS variables some time in the far future. For now though, this is not possible using plain CSS. There are 2 things you can do now:

1. Use a preprocessor

You could use a preprocessor, such as LESS or SCSS. In the case of LESS, you would need to use mixins, and in SCSS you would need to extend the existing class. There are more CSS preprocessors, but these are the most popular ones.

The syntax you're using would be the exact same syntax as the syntax required in Less.

SCSS demo, LESS demo

2. Use JavaScript

If you're running your site on a server you can't easily access yourself, or if you have any other reason not to be able to install such preprocessors, you could use JavaScript as an alternative. You would have to run a script that scans all of the class's applied styles. This would work (based on this SO answer), but do watch out with cross-domain rules.

function applyRules(from, to) {
    var sheets = document.styleSheets;
    var re = new RegExp('(^|,)\\s*'+from+'\\s*(,|$)');
    var rules, curr;
    var styles = '';
    for (var i=0;i<sheets.length;i++) {
        rules = sheets[i].rules || sheets[i].cssRules;
        for (var j=0;j<rules.length;j++) {
            if (re.test(rules[j].selectorText)) {
                curr = rules[j].cssText || rules[j].style.cssText;
                styles += ';' + curr.substring(curr.indexOf('{')+1, curr.indexOf('}'));
            }
        }
    }
    var sheet = document.createElement('style');
    sheet.type = 'text/css';
    sheet.innerHTML = to + '{' + styles + '}';
    document.head.appendChild(sheet);
    return sheet;
}
applyRules('.red', 'button:hover');

Demo.

That will search through all accessible stylesheets for a style that selects for .red, and apply those styles to button:hover.

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

6 Comments

This has nothing to do with a parent selector, unless you are confusing the meaning of the term as it is used in that question, with the term as it is used in the documentation of some preprocessor languages.
@BoltClock the question involves traversing up the DOM tree using CSS selectors.
No, it doesn't. It involves applying styles in one rule to another.
I just noticed that you edited the question. You have completely misinterpreted the question; the subsequent edit from the asker confirms this. Your answer would be applicable had the question actually been one of DOM traversal or modifying other elements based on the state of another, but it wasn't.
@BoltClock I'm sorry. The edit by OP did indeed make it clear, but what I edited was what I (at the time) was sure OP meant. I'm sorry for the mess I've made. Is there anything I should do to fix it?
|
0

pure CSS can't do something like that.

Check http://lesscss.org/: With LESS you can do it like

.red {
    background: #f00;
}
button {
    background: #000;
}
button:hover {
    .red;
}

or

@red = #f00; /* In LESS you can define variables with @ */
button {
    background: #000;
    &:hover { /* the &:hover means the :hover event of the parent (which is button). In this case that means button:hover */
        background: @red; /* get the varriable @red */
    }
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.