ITコース CSS基礎 020_セレクタ
セレクタ
セレクタは、ドキュメント内でスタイルを適用する必要がある要素を選択するために使用されます。異なる選択パターンを通じて、どの要素にどのスタイルを適用するかをブラウザに伝えます。
IDセレクタ（#）
要素の一意のIDで要素を選択します。IDセレクタはドキュメント内で一意であることを保証し、同じIDを再利用すべきではありません。
例：
#myID { /* スタイルルール */}クラスセレクタ（.）
要素のクラス名で要素を選択します。クラスセレクタは複数の要素に使用でき、同じ要素が複数のクラスを持つことができます。
例：
.myClass { /* スタイルルール */}要素セレクタ（p、h1）
HTML要素の名前で要素を選択します。要素セレクタはドキュメント内のすべての一致する要素を選択します。
例：
p { /* スタイルルール */}ユニバーサルセレクタ（*）
ドキュメント内のすべての要素を選択します。ユニバーサルセレクタはすべての要素に一致しパフォーマンスに影響するため、慎重に使用する必要があります。
例：
* { /* スタイルルール */}属性セレクタ（[type="text"]）
要素の属性値で要素を選択します。属性セレクタは異なる属性値に基づいて要素を選択できます。
例：
input[type="text"] { /* スタイルルール */}疑似クラスセレクタ
要素の特殊な状態や位置を選択します。疑似クラスセレクタは、ホバー、訪問済みなどの要素のインタラクティブな状態を選択するために使用されます。
例：
a:hover { /* スタイルルール */}疑似要素セレクタ
要素の特殊な部分を選択します。疑似要素セレクタは、最初の行、最初の文字などの要素の仮想部分を選択するために使用されます。
例：
p::first-line { /* スタイルルール */}子セレクタ
要素の直接の子要素を選択します。子セレクタは直接の子要素のみを選択し、子孫は含みません。
例：
ul > li { /* スタイルルール */}一般兄弟セレクタ
指定された要素と同じ親を持つすべての兄弟要素を選択します。一般兄弟セレクタは、指定された要素の後にあるすべての兄弟要素を選択し、隣接している必要はありません。
例：
h2 ~ p { /* スタイルルール */}隣接兄弟セレクタ
指定された要素の直後にある兄弟要素を選択します。隣接兄弟セレクタは、指定された要素の直後にある兄弟要素を選択します。
例：
h2 + p { /* スタイルルール */}子孫セレクタ
要素の下にあるすべての子孫要素を選択します。子孫セレクタは、深くネストされた要素を含む、指定された要素の下のすべての子孫を選択します。
例：
div p { /* スタイルルール */}結合セレクタ（,）
複数のセレクタを組み合わせて、いずれかのセレクタに一致するすべての要素を選択します。結合セレクタは、複数の異なるタイプの要素を同時に選択し、同じスタイルルールを適用するために使用されます。
例：
h1, h2, h3 { /* スタイルルール */}セレクタリスト
複数のセレクタを優先順位順にリストし、最も一致するものを選択します。セレクタリストは、異なる条件のスタイル要件を満たすために、異なるセレクタの組み合わせに従って複数の要素を選択できます。
例：
div p,.myClass,#myID { /* スタイルルール */}セレクタの命名規則
セレクタの名前は、文字、数字、アンダースコア、またはハイフンで構成される文字列でなければなりません。
セレクタの名前は文字またはアンダースコアで始まる必要があります。
セレクタの名前は数字で始めることはできません。
セレクタの名前にはスペースを含めることはできません。
推奨事項：
意味のある名前を使用する： セレクタの名前は、選択された要素の役割や目的を明確に反映する必要があります。
命名規則に従う： キャメルケースやハイフン区切りの命名など、一貫した命名規則を使用して、コードの一貫性を向上させます。
無意味な略語を避ける： 他の開発者がセレクタの意味を理解できるように、過度に短いまたは無意味な略語の使用を避けます。
セマンティクスに従う： コードの可読性と保守性を向上させるために、セマンティックなセレクタを使用します。