In css, can I access the value of a property from an element's parent?

Question

Right now I have CSS (SASS) code that does this:

.container
  background-color: red
  .inner
    ...
    border-bottom-color: red

(in this case, the .inner is a triangle, so its border color is serving as its background color)

I'd like to avoid specifying the second 'red', something like:

.container
  background-color: red
  .inner
    border-bottom-color: attr(parent.background-color)

Is there a way to do this in pure CSS? (I can do it using SASS variables, or JS, or whatnot, but I'd like to stay within CSS.)

duplicate? http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Phil, Jan 16 '14 at 14:52

André Dion · Answer 1 · 2014-01-16T15:01:22.593

3

There's no way (currently) to do this in pure CSS, but since you mentioned you're using SASS, you could simply use a variable:

$myColor: red

.container
    background-color: $myColor
    .inner
        border-bottom-color: $myColor

Edit

Depending on how the rest of your CSS is structured and since you're dealing with border-color you can set either border-color or color on .container and then set border-bottom-color: inherit; on .inner:

.container {
    border-color: red;
    background-color: red;
}

.container .inner { border-bottom-color: inherit; }

This is specific to the properties in your example, however. There is no way to explicitly inherit values across different properties.

edited Jan 16 '14 at 15:01

answered Jan 16 '14 at 14:54

André Dion

19,231
7
52
59

As mentioned in the body of the question, I am more interested in the existence (or not) of a CSS solution... – Alex Feinman Jan 16 '14 at 14:57
1

@AlexFeinman There is no CSS solution. `inherit` is the closest thing that's similar to what you're trying to do, but is only intended to inherit the values of the *same* properties. – André Dion Jan 16 '14 at 14:58

score 1 · Accepted Answer · answered Jan 16 '14 at 15:04

CSS variables are in a very early stage of the specification process.

This is something that will definitely come, but you can't really use it nowadays. (MDN states that Fx 29 supports it already)

Example:

::root {
    var-brand-color: red;
}

.container {
    background-color: var( brand-color );
}
.container .inner {
    border-bottom-color: var( brand-color );
}

In css, can I access the value of a property from an element's parent?

2 Answers2