:defaultとは
- ここで説明する:default とは次の語句からなるCSSの疑似クラスです。
- default
- 読み: デフォルト
意味: 既定値(すでに決まっている値)、初期値、初期設定
:default疑似クラスの概要
この疑似クラスはセレクタに該当する入力要素が既定の設定である時に適用され一時的なプロパティ値の変更を行います。
これは主にフォーム上の要素グループの中で既定の設定だという意味の用途で使われますが、フォーム以外で利用しても問題ありません。
既定の設定とは文書の初期設定の段階で入力要素が入力された状態になっていることを指しています。 例を挙げるとinput要素のcheckbox型やradio型はchecked属性を付けたものが、この疑似クラスに検知されます。 またformのデーターを送信するためのsubmit型も、この疑似クラスに検知されます。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:default{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはinput要素です。 この要素に:default疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: フォームの要素グループ内で既定となる要素を検知する
ここではフォーム上に配置されたinput要素の各タイプで既定の入力値がtrueの判定になっている要素を検知しています。 例えばチェックボックスやラジオボタンの場合、checked属性が付いている要素は初期設定でチェックされています。 また、ボタンタイプの要素の場合、送信ボタン型(type="submit")が既定の設定と判定されます。
form input, form select{
margin: 10px;
}
form input:default + label{
background-color: ##aquamarine;
}
form select option:default{
background-color: ##aquamarine;
}