:default

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

이 선택자는 HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 <button>, <input type="checkbox"> (en-US), <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.

브라우저 호환성

BCD tables only load in the browser