: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>
이면 선택됩니다. (image
와submit
처럼, 양식을 제출하는 다른<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