基本的な CSS セレクター

CSS において、スタイル設定したいウェブページ上の HTML 要素を対象とするためにセレクターを使用する方法については、すでに説明しました。 CSS セレクターにはさまざまな種類があり、スタイル設定する要素を選択する際にきめ細かい精度を実現できます。次のいくつかの記事では、さまざまなタイプについて詳しく見ていきます。この記事では、基本的なタイプ、クラスおよび ID セレクター、セレクターリストなど、セレクターの基本についておさらいします。また、全称セレクターについても紹介します。

前提知識: HTML の基本（ 基本的な HTML の構文を学んでいること）。
学習成果:
  • 基本的なセレクター型（要素型、クラス、ID）。
  • ID は文書内の固有であるため、特定の要素を 1 つ選択するには ID を使用すべきであることを理解すること。
  • それぞれの要素に複数のクラスを指定することができ、必要に応じてスタイルのレイヤーとして使用することができること。
  • セレクターリスト。
  • 全称セレクター。

セレクターとは

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

多少のコードで、 h1 が強調されている。

以前の記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、h1 は HTML 要素で選択する一方 .special はクラスで選択します。

要素型セレクター

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

CSS ルールを追加して、 <h1> 要素を選択し、その色を青に変更してみましょう。

html
<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>
css
body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

クラスセレクター

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

html
<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>
css
body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

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

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

html
<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>
css
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 も必要です。

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

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

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

<div class="danger">
  これはスタイル設定されません。また、 notebox クラスを持つ必要があります。
</div>
css
body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666;
  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 つしか id 値を適用できないという違いがあります。 ID は id を持つ要素を選択することができ、要素と ID が一致する場合にのみ要素をターゲットとするために、要素型セレクターを ID の前に置くことができます。次の例では、どちらの使用方法も見ることができます。

html
<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>
css
body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

警告: 文書内で同じ ID を複数回使用すると、スタイル設定の目的では動作しているように見えるかもしれませんが、これは行わないでください。これは不正なコードとなり、多くの場所で奇妙な動作を引き起こすことになります。

セレクターリスト

同じ CSS を使用する場合は、それぞれのセレクターを セレクターリスト (selector list) にまとめてルールを適用できます。たとえば、h1 と .special の CSS が同じ場合、2 つの個別のルールとして記述できます。

css
h1 {
  color: blue;
}

.special {
  color: blue;
}

カンマ区切りでセレクターリストにもできます。

css
h1, .special {
  color: blue;
}

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

css
h1,
.special {
  color: blue;
}

以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。

html
<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>
css
body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

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

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

css
h1 {
  color: blue;
}

..special {
  color: blue;
}

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

css
h1, ..special {
  color: blue;
}

全称セレクター

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

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

html
<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>
css
body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

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

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

全称セレクターの用途のひとつは、セレクターを読みやすく、また、何を行っているのかをより明確にすることです。例えば、記事 <article> 要素の子孫要素で、親の最初の子であるものすべてを選択し、太字にしたい場合、 :first-child 擬似クラスを使用することができます。この点については、擬似クラスと擬似要素のレッスンで詳しく説明します。

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

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

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

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

どちらも同じことをしていますが、読みやすさが大幅に改善されています。

まとめ

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

メモ: セレクターの完全なリストについては、 CSS セレクターリファレンスを参照してください。

関連情報

CSS classes, Scrimba MDN カリキュラムパートナー

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