:default

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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 Standard
# selector-default
Selectors Level 4
# default-pseudo

브라우저 호환성

BCD tables only load in the browser