:default
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020년 1월.
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>유형에도 적용됩니다.)
구문
Error: could not find syntax for this item예제
HTML
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
css
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
결과
명세
| Specification |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |
브라우저 호환성
Loading…