おい、ちょっといいか。最近のコードレビューをしていて、また見つけたんだよ。ラジオボタンやセレクトボックスの初期値（デフォルト選択）に対して、わざわざJavaScriptで初期判定させたり、HTMLにべた書きしたクラス名を夜な夜なCSSで拾いに行っているコードをな。
「おいおい、DOMが初期化された時の状態くらい、CSSに任せようぜ」って思わず声に出ちまったよ。
フロントエンドの中級から一歩抜け出して、シニアの領域に踏み込もうとしているお前らなら、CSSの「状態」を検知するセレクタの引き出しは多ければ多いほどいい。今回は、フォームの初期状態を静かに、そして確実に捉えてくれる隠し球、`:default` 疑似クラスについて徹底的に解説してやる。
ブラウザの裏側の動きから、現場で使える実践的なテクニックまで叩き込むから、最後までついてきな。
—
1. `:default` 疑似クラスとは何か？（基本仕様の整理）
一言で言うなら、`:default` は 「ページが読み込まれた時点（あるいはフォームがリセットされた時点）で、あらかじめ選択されている（またはチェックが入っている）フォーム要素」 をターゲットにするための疑似クラスだ。
対象になるのは主にこいつらだ。
- ``（HTMLで `checked` 属性がついているもの）
- ``（グループ内で最初から `checked` 属性がついているもの）
- `
- `
ここでよくある勘違いが、「`:checked` と何が違うの？」という疑問だ。
結論から言うと、`:checked` は「現在チェックが入っているかどうか（動的な状態）」を捉える。ユーザーがクリックしてチェックを外せば、`:checked` にはヒットしなくなる。
一方、`:default` は「HTMLの初期値として定義されていた状態（静的なアイデンティティ）」を指す。ユーザーがカチカチと操作して他のラジオボタンを選ぼうが、最初にデフォルトだった奴は、変わらず `:default` のプライドを持ち続ける。この「変わらない基準点」を知っているかどうかが、CSS設計の幅を大きく広げるんだ。
—
2. ブラウザは裏側でどう処理しているのか？
少しアンダーザフードな話をしよう。ブラウザのレンダリングエンジン（BlinkやGeckoなど）は、HTMLのパース時に DOMツリーを構築する。このプロセスで、各フォーム要素の `defaultChecked` プロパティや `defaultSelected` プロパティの初期値をメモリ上に保持している。
ユーザーがフォームをリセット（`
だから、JavaScriptでDOMをゴニョゴニョいじって値を書き換えたとしても、HTMLの初期構造やリセット時の基準がブレない限り、CSS側は迷うことなく正確にその要素を特定できる。これが非常に堅牢な理由なのさ。
—
3. 現場で使える！実践コード例とデザインパターン
百聞は一見にしかずだ。実務でそのまま使える、ちょっと気の利いたコードを見せてやろう。
パターンA：リセットされたことをユーザーに視覚的に教える「親切なフォーム」
ユーザーが「フォームの入力内容をリセット（初期化）」した瞬間、どの項目が初期値だったのかをフワッとハイライトしてあげるUIだ。こういう細かい配慮が、プロダクトの品質をグッと引き上げるんだよ。
/ ベースのカードスタイル /
.radio-card {
display: block;
padding: 12px 16px;
margin-bottom: 8px;
border: 1px solid #ccc;
border-radius: 6px;
transition: all 0.2s ease;
}
/ ユーザーが選択している状態（動的） /
.radio-card input[type=”radio”]:checked + span {
font-weight: bold;
color: #0066cc;
}
/
【ここがミソ！】
初期値（デフォルト）として設定されていた要素を、
リセットボタンが押された後などに「ここが初期値だよ」と優しく教えるバッジを出す
/
.radio-card input[type=”radio”]:default + span::after {
content: “（初期設定）”;
font-size: 0.85rem;
color: #e67e22;
margin-left: 8px;
font-weight: normal;
}
/ フォームがリセットされた直後、デフォルト値のカードを特別にハイライトする /
.radio-card input[type=”radio”]:default:checked ~ span {
/ リセットされて初期値に戻った瞬間、このスタイルが適用される /
}
パターンB：デフォルトの「送信ボタン」を一発で目立たせる
複数ボタン（「下書き保存」と「公開する」など）があるフォームで、どれが「主動線（デフォルトでEnterキーを押した時に実行されるアクション）」なのかをCSSで制御するパターンだ。
.btn {
padding: 10px 20px;
border: 1px solid #999;
background-color: #f0f0f0;
border-radius: 4px;
}
/
フォーム内でデフォルトの送信ボタン（またはフォーカス時などのプライマリボタン）を直感的に際立たせる。
`:default` を使うことで、HTML側の構造（どれが主ボタンか）とCSSを美しく同期できる。
/
button[type=”submit”]:default {
background-color: #007bff;
color: #fff;
border-color: #0056b3;
box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}
—
4. シニアが教える「知っておくべき罠」と注意点
便利な `:default` だが、実務で使う上ではいくつか注意すべき「落とし穴」もある。ここをクリアしておかないと、後輩から「バグってますよ」って泣きついてこられるから覚えておけ。
1. IE11のことは忘れろ（だが、レガシーブラウザの仕様差異には気をつけろ）
Modern CSSの基本だが、IE11は当然サポート外だ。しかし、モダンブラウザ間でも、動的にJavaScriptから `element.defaultChecked = true` のように書き換えた場合の再描画のタイミングで、CSSの適用に微妙なタイムラグが生じることが稀にある。基本は「HTMLの初期描画に頼るもの」として設計するのが鉄則だ。
2. `:checked` との競合・優先順位に注意
セレクタの特殊詳細度（Specificity）自体は他の疑似クラス（`:hover` や `:checked` など）と同等だ。そのため、CSSの記述順序が非常に重要になる。
「ユーザーが選んだ現在の状態（`:checked`）」と「初期値の状態（`:default`）」をどう上書きし合うか、カスケードのルールを意識して記述しないと、意図しないスタイルの漏れが発生する。
—
最後に：CSSだけでできることはCSSに任せろ
俺たちが書くフロントエンドのコードは、常に「シンプルで、保守性が高く、パフォーマンスに優れたもの」であるべきだ。
わざわざJavaScriptでイベントリスナーを仕込んで、クラスの付け替えを監視しなくても、ブラウザが標準で用意してくれている `:default` のような強力なプリミティブを知っていれば、コードの量は減り、バグの温床も綺麗に消し去ることができる。
お前も今日のタスクから、無駄なJSのロジックを削ぎ落として、こういうスマートなCSSセレクタに置き換えてみろよ。コードレビューで「おっ、分かってるね」って言わせてやるからさ。それじゃ、次の現場のコードも頼むぜ！
コメント