CSSのIDセレクター：基本から応用まで徹底解説
CSSにおけるIDセレクターとは
CSSでは、要素のid属性に基づいてスタイルルールを定義することができます。指定したIDを持つすべての要素は、定義されたルールに従って表示されます。IDセレクターは「#（シャープ）」記号を使って記述するのが特徴です。
基本的なIDセレクターの使い方
#black {
color: #000000;
}
上記のルールにより、ドキュメント内でid属性に「black」が設定されているすべての要素の内容が、黒色で表示されます。
要素名と組み合わせて指定範囲を絞り込む
IDセレクターは、HTMLタグ名と組み合わせることで、より限定的なスタイリングが可能になります。次の例をご覧ください。
h1#black {
color: #000000;
}
この場合、id属性に「black」が設定された<h1>要素だけが黒色で表示されます。同じIDを持つ他の種類の要素には、このスタイルは適用されません。
子孫セレクターとの組み合わせで真価を発揮
IDセレクターの本当の力が発揮されるのは、子孫セレクターの基礎として使うときです。以下の例を見てみましょう。
#black h2 {
color: #000000;
}
この例では、id属性に「black」が設定された要素の内側にある、すべてのレベル2見出し（<h2>）が黒色で表示されます。このようにIDセレクターを出発点にすることで、ページ全体の構造に沿った柔軟なスタイル制御が実現できます。
-
CSS属性セレクターでフォームを美しくスタイリングする方法
CSS属性セレクターとは CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。 属性セレクターには、主に以下のような記述ルールがあります。 p[lang] ― lang属性を持つすべてのp要素を選択します。 p[lang=fr] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。 p[lang~=fr] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。
-
CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方
CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま