: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

브라우저 호환성