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>
이면 선택됩니다. (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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.