CSSの:focusセレクターとは？フォーカス時のスタイル指定方法を解説
CSSの:focusセレクターは、キーボード操作やマウスクリックによってフォーカス（入力状態）が当たっている要素を選択するための疑似クラスです。主にフォームの入力フィールドなどで使用され、ユーザーが現在操作している要素を視覚的に強調表示できます。
:focusセレクターの基本的な使い方
:focusセレクターを使うと、テキストボックスやボタンなど、フォーカスを受け取った瞬間に背景色や枠線などを変更できます。これにより、どの項目を入力しているのかがひと目でわかるようになり、フォームの使い勝手（ユーザビリティ）が向上します。
実装例
以下のコードでは、input要素にフォーカスが当たったときに背景色が緑色に変わるように設定しています。実際にコードを実行して、:focusセレクターの動作を確認してみてください。
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: green;
}
</style>
</head>
<body>
<form action="">
科目：<input type="text" name="subject"><br>
氏名：<input type="text" name="student"><br>
年齢：<input type="number" name="age"><br>
<input type="submit" value="送信">
</form>
</body>
</html>
コードの解説
- input:focus：すべてのinput要素が対象となり、フォーカスが当たっている間だけスタイルが適用されます。
- background-color: green;：フォーカス中の入力欄の背景色を緑色に変更します。
- フォーカスが外れる（他の要素をクリックする、Tabキーで移動するなど）と、元のスタイルに戻ります。
:focusセレクターを使うメリット
- 視認性の向上：現在入力中のフィールドが明確になり、入力ミスを減らせます。
- アクセシビリティの向上：マウスを使わずキーボードだけで操作するユーザーにとって、フォーカス位置がわかりやすくなります。
- デザインのカスタマイズ：デフォルトのフォーカス表示（青い枠線など）を独自のスタイルに置き換えられます。
このように、:focusセレクターはフォームUIをより使いやすく魅力的にするための重要なCSS機能です。ぜひ実際のプロジェクトでも活用してみてください。
-
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