プログラミング

CSSセレクターの種類と使い方

CSSのスタイルシートにおける「指定子(セレクター)」は、HTML要素にスタイルを適用するために使用される重要な要素です。これらの指定子は、特定のHTML要素をターゲットにし、望ましいスタイルを適用する役割を果たします。CSSの指定子にはいくつかの種類があり、状況に応じて適切なものを使うことで、より精密なデザインを実現することができます。

この記事では、CSSで使用される主要な指定子(セレクター)の種類について、詳細に説明します。

1. 基本的な指定子

a) 要素(タイプ)セレクター

要素セレクターは、指定されたHTMLタグにスタイルを適用します。例えば、すべての

タグに対してスタイルを適用する場合には、以下のように書きます。

css
p { 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. グループセレクター

複数のセレクターをカンマで区切って並べることで、複数の要素に同じスタイルを適用することができます。

css
h1, h2, h3 { color: red; }

このコードは、

、および

タグのすべてに赤色の文字を適用します。

3. 子孫セレクター

子孫セレクターは、特定の親要素内のすべての子要素や孫要素にスタイルを適用します。スペースを使って親と子を区切ります。

css
div p { color: purple; }

このコードは、すべての

内の

要素に紫色の文字を適用します。

4. 子セレクター(直接子)

子セレクターは、親要素の直下にある子要素にスタイルを適用します。これを示すには、>(大なり記号)を使用します。

css
ul > li { list-style-type: square; }

このコードは、

Back to top button