CSS에서 요소의 부모로부터 속성 값에 액세스 할 수 있습니까?

Question

는 지금은이 수행 (SASS) 코드 CSS를 가지고 :

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

I를 (그 테두리 색상이 배경 색상으로 제공되는이 경우, .inner은 삼각형이다) 순수 CSS에서이 작업을 수행 할 수있는 방법이 있나요

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

: 빨강 '같은 것을'두 번째를 지정하지 않도록하고 싶습니다 '? (SASS 변수 또는 JS 등으로 할 수 있지만 CSS 내에서 머물고 싶습니다.)

Answer 1

CSS variables은 매우 early stage of the specification process입니다.

이것은 분명히 올 것이지만 요즘은 실제로 사용할 수 없습니다.

예 (MDN은 FX는 29 일 이미 지원 미국 주 있음) :

이

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

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

Answer 2

순수 CSS에서는이 작업을 수행 할 방법이 없습니다. 당신의 CSS의 나머지 부분은 어떻게 구성되어 있는지에 따라

$myColor: red 

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

편집

하고 border-color 상대하고 있기 때문에 당신은 border-color 또는 color에 하나를 설정할 수 있습니다 SASS 사용하여, 당신은 단순히 변수를 사용할 수 있습니다 .container 다음을 설정하십시오..inner에 :

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

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

그러나 이것은 귀하의 예제의 속성에 따라 다릅니다. 서로 다른 속성간에 명시 적으로 값을 상속 할 방법이 없습니다.