:default で規定のデザインを決める
:default 擬似クラスは IE と Edge 以外で使える。このセレクターを MDN では以下のように説明されている。
:default 擬似クラスは、類似の要素のグループ内で既定となっているユーザインタフェース要素を特定するために使われます。
この説明は難しく、「規定となっているユーザーインターフェース要素」がよくわからない。そのため、MDN の例に書かれたコードを JSFiddle で動かして確認してみる。すると、最初に出現する input type="submit" にセレクターの指定が当たっているようだ。
他のページから仕様を読み進めていくと、:default が適用される条件が書いてあった。
button要素、input type="submit"、input type="image"の中で最初にフォームに出現する要素checked属性が適用されたinput要素selected属性が適用されたoption要素
なるほど、条件としてはわかりやすい。が、これだけ一括でスタイルを指定するのは難しいのと、:default が何を指すか覚えておくのが面倒そう。属性セレクターなどを使って個別に指定するほうが良いんじゃないだろうか。
あと、最後につたないデモを残してく。上の条件を試した。
- (Demo):default で当たる部分を確認する
