CSSの:checkedセレクターとは？チェック済みinput要素へのスタイル適用方法を解説
:checkedセレクターとは？
CSSの:checkedセレクターは、チェックされた状態にある<input>要素（チェックボックスやラジオボタンなど）に対してスタイルを適用するための疑似クラスです。選択中の項目だけサイズを変えたり、色を強調したりすることで、ユーザーにとって見やすく操作しやすいフォームを作ることができます。
以下のコードを実行すると、:checkedセレクターの動作を実際に確認できます。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
input:checked {
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<p>好きなスポーツ:</p>
<form action="">
<input type = "checkbox" value = "Football">サッカー<br>
<input type = "checkbox" value = "Cricket">クリケット<br>
<input type = "checkbox" checked = "checked" value = "Tennis">テニス<br>
<input type = "checkbox" value = "Badminton">バドミントン
</form>
</body>
</html>
表示結果
ポイント解説
- input:checked { ... } … チェックが付いた状態のinput要素にのみ、幅20px・高さ20pxのスタイルを適用しています。
- checked属性 … 「テニス」のチェックボックスにはHTML側で
checked属性が設定されているため、ページを読み込んだ時点で選択状態になり、:checkedのスタイルが自動的に反映されます。 - 応用範囲 … :checkedセレクターはチェックボックス以外にも、ラジオボタン（type="radio"）やセレクトボックス内の選択済み<option>要素にも利用できます。
-
CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法
CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*
-
CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説
CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white