CSS 要素セレクター

JPKODA 編集部 May 6, 2026

要素セレクターは、HTML要素を直接ターゲットにしてスタイルを適用するために使用されます。

1. 要素セレクターを理解する

要素セレクターは、CSSセレクターの中で最も基本的なタイプです。これらは要素名（つまりタグ名）に基づいてHTML要素を特定します。

例えば、pセレクターはHTMLドキュメント内のすべての<p>（段落）要素を選択し、h1セレクターはすべての<h1>（第1レベルの見出し）要素を選択します。

構文は非常にシンプルです。要素名をそのままセレクターとして使用します。

elementname {
  property: value;
}

解析：

要素セレクターがどのように機能するか、具体的な例を見ていきましょう。

すべての段落（<p>）のテキスト色を青に変更するには、以下のCSSを使用します。

p {
  color: blue;
}

これで、<p>タグ内のすべてのテキストがブラウザ上で青色で表示されます。

すべての<h1>見出しのフォントサイズを24ピクセルに変更する場合：

h1 {
  font-size: 24px;
}

ページ上のすべての<h1>見出しが24ピクセルのサイズになります。

すべての<img>要素にボーダー（枠線）を追加する場合：

img {
  border: 1px solid black;
}

これにより、ページ上のすべての画像に1ピクセルの黒い実線のボーダーが付与されます。

body要素セレクターは通常、ページ全体のデフォルトスタイル（背景色やフォントファミリーなど）を設定するために使用されます。

body {
  background-color: #f0f0f0; /* 薄いグレーの背景 */
  font-family: Arial, sans-serif;
}

これにより、ページ全体の背景色が薄いグレーになり、デフォルトのフォントがArialに設定されます（Arialが利用できない場合はサンセリフ体が使用されます）。

アンカー要素（リンク）はaセレクターを使用してスタイルを設定します。色を変更したり、下線を消したりすることが可能です。

a {
  color: green;
  text-decoration: none; /* 下線を削除 */
}

これで、すべてのリンクが緑色になり、デフォルトの下線が表示されなくなります。

要素セレクターはシンプルですが、優先順位（Specificity）の面で他のセレクターとどのように相互作用するかを理解することが重要です。優先順位は、複数のルールが同じ要素をターゲットにしている場合に、どのCSSルールが適用されるかを決定します。

要素セレクターは低い優先順位を持っています。これは、より具体的なセレクター（後述するクラスセレクターやIDセレクターなど）が同じ要素をターゲットにしている場合、その具体的なセレクターで定義されたスタイルが優先されることを意味します。

例えば、以下のCSSを考えてみましょう。

p {
  color: blue;
}

.highlight {
  color: red;
}

そして、以下のHTMLがあるとします。

<p>これは普通の段落です。</p>
<p class="highlight">この段落はハイライト表示されます。</p>

最初の段落は、p要素セレクターのみに該当するため青色になります。
二番目の段落は、p要素セレクターと.highlightクラスセレクターの両方に該当しますが、クラスセレクターの方が優先順位が高いため、color: redが適用されて赤色になります。

要素セレクターは他のセレクターと組み合わせて、特定のコンテキスト内にある要素をターゲットにすることができます。これは「ネスト」または「子孫セレクター」と呼ばれます。

例えば、<div>要素の内部にある段落のみをターゲットにしたい場合は、以下のCSSを使用します。

div p {
  font-size: 14px;
}

このルールは、<div>要素の子孫である<p>要素にのみ適用されます。<div>の外にある段落には影響しません。

基本・共通のスタイルに使用する： 要素セレクターは、一般的なHTML要素のデフォルトスタイル（ベーススタイル / Base Styles）を設定するのに最適です。
複雑なスタイルへの使用は避ける： より具体的で限定的なスタイルを適用する場合は、クラス（Class）やIDセレクターを使用してください。要素セレクターを多用しすぎると、CSSのメンテナンスが困難になり、予期しないスタイルの衝突を引き起こす可能性があります。
優先順位を考慮する： 要素セレクターが他のセレクターと比べてどのように優先されるか（または上書きされるか）を常に意識しましょう。
ベースラインの構築： ドキュメント全体のベースラインとなるスタイルを確立するのに活用してください。例えば、body要素にデフォルトのフォントやサイズを設定する際などに非常に有効です。