unset

CSS unset 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 다르게 표현하자면, 전자일 땐 inherit 키워드처럼, 후자일 땐 initial 키워드처럼 동작합니다. all 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.

예제

글자 색

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

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

결과

테두리

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

div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

결과

명세

명세 상태 설명
CSS Cascading and Inheritance Level 4
The definition of 'unset' in that specification.
Candidate Recommendation Level 3에서 변화 없음
CSS Cascading and Inheritance Level 3
The definition of 'unset' in that specification.
Candidate Recommendation 초기 정의

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
unsetChrome Full support 41Edge Full support 13Firefox Full support 27IE No support NoOpera Full support YesSafari Full support 9.1WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 27Opera Android Full support YesSafari iOS Full support 9.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support

같이 보기

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