CSSの:disabledセレクターとは？無効な入力要素をスタイリングする方法
CSSの :disabled セレクターを使用すると、無効化（disabled）されたすべての <input> 要素にスタイルを適用できます。フォーム内でユーザーが操作できない入力フィールドを視覚的に区別したい場合に非常に便利な擬似クラスです。
:disabledセレクターの基本
:disabled 擬似クラスは、HTMLの disabled 属性が設定されているフォーム要素を対象とします。対照的に、有効な（操作可能な）要素を選択したい場合は :enabled セレクターを使用します。この2つを組み合わせることで、フォームの状態に応じた直感的なUIを実現できます。
実装例
以下のコードでは、有効な入力フィールドには青色の背景を、無効化された入力フィールドには赤色の背景を適用しています。
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: blue;
}
input:disabled {
background: red;
}
</style>
</head>
<body>
<form action = "">
科目: <input type = "text" name = "subject"><br>
学生名: <input type = "text" name = "student"><br>
年齢: <input type = "number" name = "age" disabled><br>
</form>
</body>
</html>
コードの解説
上記の例では、3つの入力フィールドを持つフォームを作成しています。「科目」と「学生名」のフィールドは通常の有効な状態であるため、input:enabled のスタイルが適用され、背景が青色で表示されます。一方、「年齢」フィールドには disabled 属性が設定されているため、input:disabled のスタイルが適用され、背景が赤色になります。
このように :disabled セレクターを活用することで、編集できないフィールドをユーザーに明確に伝えることができ、フォームの使いやすさ（UX）向上につながります。
-
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