unset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
CSS unset
키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 다르게 표현하자면, 전자일 땐 inherit
키워드처럼, 후자일 땐 initial
키워드처럼 동작합니다. all
단축 속성을 포함한 모든 속성에 사용할 수 있습니다.
예제
글자 색
HTML
html
<p>This text is red.</p>
<div class="foo">
<p>This text is also red.</p>
</div>
<div class="bar">
<p>This text is green (default inherited value).</p>
</div>
CSS
css
.foo {
color: blue;
}
.bar {
color: green;
}
p {
color: red;
}
.bar p {
color: unset;
}
결과
테두리
HTML
html
<p>This text has a red border.</p>
<div>
<p>This text has a red border.</p>
</div>
<div class="bar">
<p>This text has has a black border (initial default, not inherited).</p>
</div>
CSS
css
div {
border: 1px solid green;
}
p {
border: 1px solid red;
}
.bar p {
border-color: unset;
}
결과
명세
Specification |
---|
CSS Cascading and Inheritance Level 4 # inherit-initial |
브라우저 호환성
BCD tables only load in the browser