CSSのスタイルシートにおける「指定子(セレクター)」は、HTML要素にスタイルを適用するために使用される重要な要素です。これらの指定子は、特定のHTML要素をターゲットにし、望ましいスタイルを適用する役割を果たします。CSSの指定子にはいくつかの種類があり、状況に応じて適切なものを使うことで、より精密なデザインを実現することができます。
この記事では、CSSで使用される主要な指定子(セレクター)の種類について、詳細に説明します。
1. 基本的な指定子
a) 要素(タイプ)セレクター
要素セレクターは、指定されたHTMLタグにスタイルを適用します。例えば、すべての
タグに対してスタイルを適用する場合には、以下のように書きます。
cssp {
color: blue;
}
このコードは、ページ内のすべての段落(
)に青色の文字を適用します。
b) クラスセレクター
クラスセレクターは、特定のクラスを持つすべての要素にスタイルを適用します。クラスはドット(.)で始まり、HTML要素にclass属性で指定されます。
css.button {
background-color: green;
}
このコードは、class="button"を持つすべての要素に緑色の背景を適用します。
c) IDセレクター
IDセレクターは、ページ内で一意のIDを持つ要素にスタイルを適用します。IDはハッシュ記号(#)で指定します。
css#header {
font-size: 24px;
}
このコードは、id="header"を持つ要素に24ピクセルの文字サイズを適用します。
2. グループセレクター
複数のセレクターをカンマで区切って並べることで、複数の要素に同じスタイルを適用することができます。
cssh1, h2, h3 {
color: red;
}
このコードは、
、
、および
タグのすべてに赤色の文字を適用します。
3. 子孫セレクター
子孫セレクターは、特定の親要素内のすべての子要素や孫要素にスタイルを適用します。スペースを使って親と子を区切ります。
cssdiv p {
color: purple;
}
このコードは、すべての
要素に紫色の文字を適用します。
4. 子セレクター(直接子)
子セレクターは、親要素の直下にある子要素にスタイルを適用します。これを示すには、>(大なり記号)を使用します。
cssul > li {
list-style-type: square;
}
このコードは、
- の直下にある
要素にのみ四角いリストマーカーを適用します。
5. 隣接兄弟セレクター
隣接兄弟セレクターは、指定された要素の直後に来る兄弟要素にスタイルを適用します。これを示すには、+(プラス記号)を使用します。
cssh1 + p {
margin-top: 0;
}
このコードは、
の直後に来る
タグにマージンを適用します。
6. 一般兄弟セレクター
一般兄弟セレクターは、指定された要素の後に来るすべての兄弟要素にスタイルを適用します。これを示すには、~(チルダ記号)を使用します。
cssh1 ~ p {
font-style: italic;
}
このコードは、
の後に続くすべての
タグに斜体を適用します。
7. 属性セレクター
属性セレクターは、特定の属性を持つ要素をターゲットにしてスタイルを適用します。属性の存在だけでなく、値によってもスタイルを変えることができます。
cssa[href^="https"] {
color: green;
}
このコードは、href属性がhttpsで始まるすべてのタグに緑色の文字を適用します。
8. 擬似クラスセレクター
擬似クラスセレクターは、特定の状態にある要素にスタイルを適用します。よく使われる擬似クラスには、:hover(ホバー時)や:focus(フォーカス時)などがあります。
cssa:hover {
color: red;
}
このコードは、リンクにカーソルを合わせた時にその色を赤に変更します。
9. 擬似要素セレクター
擬似要素セレクターは、特定の要素の一部(例えば、最初の文字や行)にスタイルを適用します。代表的な擬似要素には、::beforeや::afterがあります。
cssp::first-letter {
font-size: 2em;
}
このコードは、すべての
タグの最初の文字に2倍のフォントサイズを適用します。
10. ネストされたセレクター(コンテキストセレクター)
コンテキストセレクターは、特定のコンテキスト内でのみスタイルを適用するために使用されます。CSSのネストを使って、より複雑なセレクションが可能です。
cssnav ul li a {
color: white;
}
このコードは、

