: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.
試してみましょう
このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — <button>
、<input type="checkbox">
、<input type="radio">
、<option>
要素に一致させることができます。
- 既定の option 要素は
selected
属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。multiple
が付いた<select>
は、複数のselected
がついた選択肢を持つことができますので、すべてが:default
に一致します。 <input type="checkbox">
と<input type="radio">
はchecked
属性があるときに一致します。<button>
は<form>
の 既定の送信ボタンである場合に一致します。フォームに所属する<button>
のうち、 DOM 順で最初のものです。これはフォームを送信する<input>
型、例えばimage
またはsubmit
にも適用されます。
構文
:default
例
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