CSSセレクタ：.foo.bar と .foo .bar の違いを理解して、効率的にスタイルを適用しよう！
CSSクラスセレクタにおける「.foo.bar」と「.foo .bar」の違い
CSSクラスセレクタは、HTML要素にスタイルを適用する強力なツールです。要素にクラス属性を割り当てることで、CSSルールを使用してその要素の外観を制御できます。
今回取り上げる「.foo.bar」と「.foo .bar」という2つのセレクタは、一見すると似ていますが、実は異なる要素にスタイルを適用します。
「.foo.bar」：単一要素へのスタイル適用
「.foo.bar」というセレクタは、「foo」と「bar」という2つのクラスを持つ要素を選択します。言い換えると、両方のクラスを持つ要素にのみスタイルが適用されます。
例えば、HTMLコードに以下のような要素があるとします。
<div class="foo bar">
... コンテンツ ...
</div>
この場合、「.foo.bar」セレクタで定義されたスタイルは、この単一の要素にのみ適用されます。
一方、「.foo .bar」というセレクタは、「foo」クラスを持つ要素の子孫にある「bar」クラスを持つ要素を選択します。つまり、「foo」クラスを持つ要素内部にある**「bar」クラスを持つ要素すべて**にスタイルが適用されます。
上記のHTMLコード例の場合、「.foo .bar」セレクタで定義されたスタイルは、「foo」クラスを持つ要素内部にある**すべての「bar」クラスを持つ要素に適用されます。
例：ナビゲーションメニューのスタイル設定
この違いを理解する上で、ナビゲーションメニューの例を考えてみましょう。
- ナビゲーションメニュー全体には「nav」クラスを割り当てます。
- ドロップダウンメニューを含むリスト項目には、「dropdown」クラスを割り当てます。
この場合、以下のCSSルールを使用して、ドロップダウンメニューのみ赤色で背景色を設定できます。
.nav .dropdown {
background-color: red;
}
このルールは、「nav」クラスを持つ要素内部にある**「dropdown」クラスを持つ要素すべて**に適用されるため、ドロップダウンメニューのみ赤色になります。
- 「.foo.bar」：「foo」と「bar」という2つのクラスを持つ要素を選択します。
- 「.foo .bar」：**「foo」クラスを持つ要素の子孫にある「bar」**クラスを持つ要素を選択します。
どちらのセレクタを使用するかは、スタイルを適用したい要素の構造と関係性によって異なります。
- さらに複雑なセレクタを作成するには、コンマ（,）を使用して複数のクラスセレクタを組み合わせることができます。
- 子孫セレクタ以外にも、隣接兄弟セレクタ、擬似クラス、属性セレクタなど、さまざまなセレクタ種類があります。
<!DOCTYPE html>
<html>
<head>
<title>CSSクラスセレクタの例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="foo bar">
<h2>メインコンテンツ</h2>
<p>本文</p>
</div>
<div class="foo">
<ul>
<li class="bar">リスト項目1</li>
<li>リスト項目2</li>
<li class="bar">リスト項目3</li>
</ul>
</div>
</div>
</body>
</html>
CSSコード
/* .foo.bar を持つ要素に赤色背景色を設定 */
.foo.bar {
background-color: red;
padding: 10px;
border: 1px solid black;
}
/* .foo .bar を持つ要素に緑色文字色を設定 */
.foo .bar {
color: green;
font-weight: bold;
}
説明
このコードでは、以下の要素を作成しています。
.containerクラスを持つ親コンテナ要素.foo barクラスを持つ子要素 (メインコンテンツ).fooクラスを持つ子要素 (リスト).barクラスを持つ孫要素 (リスト項目1とリスト項目3)
CSSルール
.foo.barセレクタは、.fooクラスと.barクラスを両方持つ要素を選択します。そのため、main-content要素のみが赤色で背景色が設定されます。.foo .barセレクタは、.fooクラスを持つ要素の子孫にある.barクラスを持つ要素を選択します。そのため、.fooクラスを持つ要素内部にあるすべての.barクラスを持つ要素 (リスト項目1とリスト項目3) に緑色の文字色が設定されます。
実行結果
このコードを実行すると、以下のような表示になります。
- メインコンテンツ (
.foo bar要素) は赤色で背景色が設定されます。 - リスト項目1とリスト項目3 (
.foo .bar要素) は緑色の文字色が設定されます。 - リスト項目2は、CSSルールでスタイルが設定されていないため、デフォルトのまま表示されます。
この例を通して、「.foo.bar」と「.foo .bar」セレクタが、それぞれ異なる要素にスタイルを適用することを理解できたでしょうか？
- 実際には、デザインやレイアウトに合わせて、さまざまなセレクタを組み合わせて使用するケースがほとんどです。
- セレクタの優先順位や、要素の構造と関係性などを理解した上で、適切なセレクタを選択することが重要です。
CSSクラスセレクタ以外にも、要素にスタイルを適用する方法
タグセレクタ
最も基本的なセレクタで、HTML要素のタグ名に基づいてスタイルを適用します。例えば、すべての<h2>要素を赤色にする場合は以下のようになります。
h2 {
color: red;
}
利点:
- シンプルで分かりやすい
- 特定のHTML要素にのみスタイルを適用したい場合に有効
欠点:
- 複雑なレイアウトには不向き
- 汎用性が低い
IDセレクタ
HTML要素に個別に割り当てられたID属性に基づいてスタイルを適用します。IDはユニークである必要があるため、特定の要素にのみスタイルを適用したい場合に有効です。例えば、id="main"というIDを持つ要素を青色にする場合は以下のようになります。
#main {
color: blue;
}
- クラスセレクタよりも記述量が少ない場合がある
- IDはユニークである必要があるため、使いにくさがある
属性セレクタ
HTML要素の属性値に基づいてスタイルを適用します。例えば、href属性を持つすべてのリンクを赤色にする場合は以下のようになります。
a[href] {
color: red;
}
- 動的なスタイル変更に役立つ
- 記述量が多くなる場合がある
擬似クラス・擬似要素
HTML要素の一部や、要素に付随する情報に基づいてスタイルを適用します。例えば、:hover擬似クラスは、マウスカーソルが要素の上に乗った時にスタイルを適用します。
a:hover {
text-decoration: underline;
}
- インタラクションや状態変化に応じてスタイルを変化させたい場合に有効
- 視覚的に分かりやすいデザインを作成できる
- ブラウザによって互換性が異なる場合がある
子孫セレクタ
親要素の子孫要素にのみスタイルを適用します。例えば、.nav ul liセレクタは、.navクラスを持つ要素の子孫にあるすべての<li>要素にスタイルを適用します。
.nav ul li {
background-color: #eee;
}
- ネストされた構造を持つHTML要素にスタイルを適用したい場合に有効
- コードをスッキリと書くことができる
- 複雑なレイアウトでは分かりにくくなる場合がある
- 特定の要素のみを対象にしたい場合は不向き
css css-selectors
