基本的な CSS セレクター

セレクターとは

CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS セレクターは要素やその他の用語の組み合わせであり、どの HTML 要素にルール内の CSS プロパティ値 (property value) を適用するかをブラウザーに伝えます。セレクターによって選択された要素を、選択対象 (subject of the selector) と呼びます。

以前の記事では、様々なセレクターに出会い、様々な方法で文書を対象にするセレクターがあることを学びました。例えば、h1 のような要素や、.special のようなクラスを選択する方法です。まずは、これまでに学んだ主なセレクターを復習しましょう。

要素型セレクター

要素型セレクターは、文書内の HTML のタグや要素を選択するものであるため、タグ名セレクターまたは要素セレクターと呼ばれることもあります。例えば、下記では span、em、strong セレクターを使用しています。

次の例を編集して（"Play" をクリックすると MDN Playground で開きます）、<h1> 要素を選択し、その色を青に変更する CSS ルールを追加してみてください。

<h1>要素型セレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

クラスセレクター

クラスセレクターは大文字と小文字を区別し、ドット (.) 文字で始まります。文書内でそのクラスが適用されているすべての要素が選択されます。次のライブサンプルでは、highlight というクラスを作成し、文書内の複数の箇所に適用しています。このクラスを持つすべての要素がハイライト表示されます。

<h1 class="highlight">クラスセレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

クラスセレクターの実践

上記の例を編集して（MDN Playground を使用）、以下の変更を加えてみてください。

1. HTML を編集して、.highlight スタイルが適用されるコンテンツを変更しましょう。例えば、既存コンテンツの異なる部分を囲む <span> 要素を追加して highlight クラスを適用したり、既存の highlight クラスを除去したり、highlight クラスを適用する新しいコンテンツを追加したりしましょう。
2. CSS を編集して、.highlight ルールの内部にある宣言を変更し、場合に応じて新しい宣言を追加しましょう。これにより、highlight クラスが適用されているすべての要素のスタイル設定がどのように影響を受けるかを確認しましょう。
3. CSS 内に新しいクラスルールを作成し、その中に異なる宣言を記述しましょう（例えば、.highlight2 というセレクターを使用）。その後、そのクラスを HTML の特定部分に適用してみましょう。

特定の要素についたクラスを対象にする

クラスが適用された特定の要素を対象とするセレクターを作成することができます。次の例では、 <span> のうちクラス名が highlight であるものを、<h1> 見出しでクラス名が highlight であるものとは異なる形で強調表示します。 対象とする要素型セレクターを使用し、クラス名の間にホワイトスペースを入れずにドットでつなげます。

<h1 class="highlight">クラスセレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

この手法はルールの適用範囲を縮小します。ルールは、その具体的な要素とクラスとの組み合わせにのみ適用されます。ルールを他の要素にも適用したい場合は、別のセレクターを追加する必要があります。

要素に複数のクラスが適用されていた時の対象

要素に複数のクラスを適用し、それらを個別に対象にすることも、セレクター内のクラスがすべて存在する場合に要素だけを選択することもできます。これは、サイト上でさまざまな方法で結合できる部分を構築する際に役立つでしょう。

次の例では、メモを含む <div> があります。ボックスに notebox クラスが設定されている場合、灰色の境界線が適用されます。ボックスに warning または danger クラスが設定されている場合は、 border-color を変更します。

2 つのクラスがホワイトスペースなしで連結されている場合、要素が一致するようにブラウザーに指示することができます。最後の <div> には danger クラスのみが適用されているため、スタイル設定が適用されないことがわかります。スタイルを設定するには、notebox クラスも必要です。

<div class="notebox">これは情報のメモです。</div>

<div class="notebox warning">このメモは警告を表します。</div>

<div class="notebox danger">このメモは危険であることを表します。</div>

<div class="danger">
  これはスタイル設定されません。また、 notebox クラスを持つ必要があります。
</div>

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

ID セレクター

ID セレクターは大文字と小文字を区別し、ドット文字の代わりに # で始めますが、クラスセレクターと同じ方法で使用します。違いは、ID は 1 ページにつき 1 回しか使用できず、要素は 1 つの id 値しか保有できない点です。ID セレクターは特定の id を持つ要素を選択し、要素と ID の両方が一致する場合にのみ対象とするには、ID の前に要素型セレクターを付けることができます。次の例で両方の使用法を確認できます。

<h1 id="heading">ID セレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

ID セレクターの実践

上の例を編集して、以下の変更を加えてみてください。

1. HTML を編集して、#one スタイルを 2 つ目ではなく最初の段落に適用しましょう。
2. この CSS を編集して ID セレクター内の宣言を変更し、HTML の見た目がどのように変わるかを確認しましょう。

セレクターリスト

同じ CSS を複数のアイテムに適用したい場合、個々のセレクターをセレクターリストにまとめることができます。このルールはその後、すべての個々のセレクターに適用されます。例えば、h1 セレクターと .special セレクターに同じ CSS を適用する場合、これを 2 つの別個のルールとして記述できます。

h1 {
  color: blue;
}

.special {
  color: blue;
}

同時に、これらをカンマで区切ることでセレクターリストにまとめることも可能です。

h1, .special {
  color: blue;
}

カンマの前後にホワイトスペースを入れることもできます。改行したほうが読みやすいかもしれません。

h1,
.special {
  color: blue;
}

セレクターリストの実践

次の例を使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。その後でも表示は変わらないはずです。

<h1>要素型セレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

セレクターリスト内の無効なセレクター

この方法でセレクターをまとめた場合、間違った構文で書かれたセレクターを 1 つでも含んでいると、ルール全体が無視されます。

次の例では、無効なクラスセレクターのルールは無視され、 h1 がスタイル設定されます。

h1 {
  color: blue;
}

..special {
  color: blue;
}

しかし、結合された場合、 h1 もクラスもスタイル設定されず、ルール全体が無効なものとみなされます。

h1, ..special {
  color: blue;
}

全称セレクター

全称セレクター (universal selector) はアスタリスク (*) で示します。これは文書内のすべての要素を選択します。* が子孫結合子を使用して連結されている場合、その祖先要素内のすべてが選択されます。例えば、 p * は <p> 要素の中に含まれているすべての要素を選択します。

次の例では、全称セレクターを使用してすべての要素のマージンを削除します。 見出しや段落にマージンを設けて間隔を空けるブラウザーの既定のスタイルではなく、すべてが密接に配置されます。

<h1>全称セレクター</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

この種の動作は、ブラウザーのスタイル設定をすべて削除する「リセットスタイルシート」で時折見られます。全称セレクターはグローバルな変更を行うため、下記に記述されているような特定の状況でのみ使用しています。

全称セレクターを使用して、セレクターを読みやすくする

全称セレクターの用途の一つは、セレクターをより読みやすく理解しやすいものにすることです。例えば、<article> 要素の子孫要素で、親要素の最初の子（直接の子を含む）である要素すべてを選択したい場合、:first-child 擬似クラスを使用することができます。このことについては擬似クラスと擬似要素で詳しく学びます。

article :first-child {
  font-weight: bold;
}

しかし、この記事のセレクターは article:first-child、すうなわち他の要素の最初の子であるすべての <article> 要素を選択するセレクターと混同される可能性があります。

この混乱を避けるために、全称セレクターを :first-child 擬似クラスに追加すると、セレクターが何をしているのかがより明確になるようにします。これは、 <article> 要素の最初の子である、または <article> の任意の子孫要素の最初の子である、任意の要素を選択します。

article *:first-child {
  font-weight: bold;
}

どちらも同等ですが、2 つ目の方が読みやすいと感じる人もいます。

まとめ

この記事では、前回よりも少し掘り下げて、型、クラス、 ID セレクターに注目しながら、具体的な HTML 要素を対象とするための CSS セレクターについてまとめました。次の記事では、属性セレクターについて掘り下げていきます。

関連情報

CSS classes, Scrimba ^{MDN 学習パートナー}

対話型レッスンであり、 CSS クラスに関するいくつかのガイダンスを提供します。

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ