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

같이 보기

  • initial을 사용해 속성의 초깃값을 사용하세요.
  • revert를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.
  • inherit을 사용해 속성의 값이 부모와 같도록 지정하세요.
  • all 속성을 사용하면 요소의 모든 속성을 한꺼번에 initial, inherit, revert, unset할 수 있습니다.