:default

CSS :default 의사 클래스는 연관 요소 내에서의 기본값인 요소를 선택합니다.

이 선택자는 HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 <button>, <input type="checkbox">, <input type="radio">, <option> 요소를 아래와 같은 경우에 선택합니다.

  • 옵션 요소의 기본값은 selected 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. multiple 특성의 <select>는 둘 이상의 selected 옵션을 가질 수도 있으므로, 모든 옵션이 :default로 선택됩니다.
  • <input type="checkbox"><input type="radio">checked 특성을 가지고 있으면 선택됩니다.
  • <button><form> 요소의 기본 제출 버튼, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 <button>이면 선택됩니다. (imagesubmit처럼, 양식을 제출하는 다른 <input> 유형에도 적용됩니다.)

구문

:default

예제

HTML

<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring">
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked>
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall">
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter">
  <label for="winter">Winter</label>
</fieldset>

CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

결과

명세

Specification Status Comment
HTML Living Standard
The definition of ':default' in that specification.
Living Standard No change.
HTML5
The definition of ':default' in that specification.
Recommendation Defines associated HTML semantics and constraint validation.
Selectors Level 4
The definition of ':default' in that specification.
Working Draft No change.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:defaultChrome Full support 10Edge Full support 79Firefox Full support 4IE No support NoOpera Full support 10Safari Full support 5WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support