CSSセレクター入門ガイド：基本の書き方と使い方を実例付きで解説

CSSセレクターは、スタイルを適用できる要素を選択するための仕組みです。最も基本的なのは要素型セレクターで、要素名によって対象を指定します。その他にも、idセレクター、classセレクター、全称セレクター（ユニバーサルセレクター）、子孫セレクターなど、さまざまな種類があります。

セレクターは、CSSルールを構成する2つのパーツのうちの1つです。セレクターを使うことで、HTMLページ上の特定の要素に目的のスタイルを適用できます。

CSSには多彩なセレクターが用意されており、Webページ上の要素を正確に指定できるため、デザインの自由度が大きく広がります。

このガイドでは、CSSセレクターの基礎と、よく使われる主要なセレクターのコードでの活用方法を解説します。

CSSセレクターとは

CSSセレクターは、スタイルを適用したいHTML要素を識別するものです。セレクターは、要素名、ID、クラス、その他の属性に基づいて要素を選択でき、CSSルールの中括弧（{ }）の前に記述します。

CSSでは「ルール」を使って、ある要素または複数の要素に適用すべきスタイルを定義します。ルールは「セレクター」と「宣言」の2つの要素から構成されます。

CSSルールの例を見てみましょう。

h1 {
	color: pink;
}

このCSSルールは、Webページ上のすべてのh1要素の色をピンクに設定します。このルールを構成する2つの要素は次のとおりです。

• h1：スタイルを適用する対象となる要素。これを「セレクター」と呼びます。
• color: pink：セレクターで指定した要素に適用されるスタイル。これを「宣言」と呼びます。この例では、すべてのh1要素の色をピンクに変更しています。

CSSセレクターは、Webスタイル設計の根幹をなすものです。セレクターを使えば、どの要素に特定のスタイルを適用すべきかをブラウザーに指示できます。たとえば、「ページ上のすべての<h1>要素」や「すべての<p>要素」にスタイルを適用するセレクターを作成できます。

CSSセレクターの種類

CSSにはさまざまなセレクターが用意されています。ここからは、CSSルールを設計する際によく出てくる主要なセレクターを、具体例とともに見ていきましょう。

要素型セレクター（タイプセレクター）

要素型セレクターを使うと、ドキュメント内の該当する要素のすべてに出現箇所へスタイルを適用できます。たとえば、ページ上のすべての<p>タグにスタイルを適用することが可能です。

たとえば、Webページ上のすべての段落テキストの色をグレーに変更したいとします。その場合は次のようなコードを使用します。

p {
	color: gray;
}

「p」セレクター内の宣言は、Webページ上のすべての段落（HTMLの<p>タグ）に適用されます。

CSSのidセレクター

CSSのidセレクターは、IDに基づいてページ上のHTML要素を選択します。HTMLのIDは一意であるため、idセレクターはページ上の単一の要素にスタイルを適用するために使われます。idセレクターの構文は、ハッシュ記号（#）の後に要素のIDを続ける形です。

たとえば、ページ上の「box9」という要素のheightプロパティを150pxに設定したい場合は、次のようなコードを使用します。

#box9 {
	height: 150px;
}

このルールにより、id「box9」を持つ要素の高さが150pxに設定されます。

CSSのclassセレクター

CSSのclassセレクターは、特定のclass属性を持つ要素を検索します。classセレクターの構文は、ピリオド（.）の後に選択したいクラス名を続ける形です。

したがって、「boxMiddle」というクラスを指定したい場合は、「.boxMiddle」というセレクターを使用します。

たとえば、Webページ上にボックスをデザインしているとしましょう。このボックスにはピンクの背景色を付けたいとします。ボックスには「pinkBox」というクラスが割り当てられているので、そこにスタイルを適用できます。pinkBoxクラスを持つ要素の色をピンクに設定するコードは次のとおりです。

.pinkBox {
	color: pink;
}

Webページ上で「pinkBox」クラスを持つすべての要素がピンクになります。

さらに、特定のクラスを持つ特定の要素だけにスタイルを適用することもできます。クラスセレクターのみを使用した場合、そのクラスを持つすべての要素が定義したスタイルの影響を受けます。

クラスセレクターの前に要素型を付ければ、特定のクラスを持つ特定の要素にのみスタイルを適用できます。たとえば、「pinkBox」クラスを持つすべてのHTMLの<div>タグの背景色をピンクに設定したい場合、スタイルは次のようになります。

div.pinkBox {
	color: pink;
}

このスタイルは、「pinkBox」クラスを持つ<div>タグにのみ適用されます。

CSSの全称セレクター（ユニバーサルセレクター）

CSSの全称セレクターは、Webページ上のすべての要素を選択します。このセレクターはアスタリスク（*）で表され、要素名は指定しません。主に、ページ全体のマージンやデフォルトフォントを設定する際によく使われます。

たとえば、Webページ上のすべての要素をページ中央に揃えたいとします。次のようなコードでこのスタイルを適用できます。

* {
	text-align: center;
}

このルールは、「text-align: center;」というスタイルをページ上のすべての項目に適用します。

CSSの子孫セレクター

CSSの子孫セレクターは、別の要素の子孫にあたる要素を選択し、一連のスタイルを適用します。構文は、親となる要素を指定し、半角スペースを挟んで、選択したい子孫要素を続ける形です。

たとえば、リスト内のリンクの背景色を黄色に設定したいが、ページ上の他のリンクには影響を与えたくないとします。その場合は次のようなコードを使用します。

li a {
	background-color: yellow;
}

このスタイルは「li a」という子孫セレクターを使用しています。つまり、作成したスタイルは、HTMLの<li>タグ内にある<a>タグにのみ適用されます。ページ上の他の<a>タグには適用されません。

CSSセレクターリスト

同じスタイルを複数の要素に適用したい場合は、セレクターリストを使用できます。セレクターリストを使うと、リスト内のすべての個別セレクターにルールが適用されます。

たとえば、同じスタイルルールを持つ2つのCSSルールがあるとします。

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

この2つのルールをセレクターリストとしてまとめると、コードが読みやすくなります。スタイルの間にカンマを追加するだけで実現できます。

h2, .alignCenter {
	text-align: center;
}

このコードは最初の例と同じように機能します。ただし、2番目の例ではセレクターリストを使用しているため、コードがより簡潔になっています。

CSSグループ化セレクター

CSSのグループ化セレクターは、複数のセレクターに対して一連のスタイルをまとめて適用します。繰り返しを減らし、より明確なコードを書くのに役立ちます。構文は、カンマで区切った要素セレクターのリストの後に、それらの要素へ適用したいCSSルールを続ける形です。

たとえば、次のようなスタイルを使用するWebページをデザインしているとします。

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}

このコードでは、「font-weight: normal;」と「text-align: center;」のスタイルがすべてのセレクターで共通しています。コードの重複を減らすために、グループ化セレクターを使ってこれらのスタイルをまとめることができます。そのためのコードは次のとおりです。

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

すべてのタグで共通していたtext-alignとfont-weightの2つのスタイルをグループ化しました。これにより、コードが格段に読みやすくなっています。

まとめ

CSSセレクターを使うと、Webページ上の特定の要素、または複数の要素にスタイルを適用できます。CSSには、idセレクター、classセレクター、グループ化セレクターなど、さまざまなセレクターが用意されており、これらを活用することで精密なCSSスタイルを作成できます。

この記事ではCSSセレクターのほんの入り口を紹介したにすぎません。CSSには他にも、属性セレクター、擬似クラス、擬似要素、結合子（コンビネーター）などのセレクターがあります。より高度なルールを作成したい場合は、これらのセレクターについても深く学んでみるとよいでしょう。

このチュートリアルでは、具体例を挙げながら、CSSで最もよく使われるセレクターの使い方を解説しました。これで、CSSセレクターを使いこなして、プロフェッショナルのようにスタイルを作成するための基礎知識が身についたはずです。

おすすめのCSS学習リソース、講座、書籍については、「CSSの学び方ガイド」もぜひ参考にしてください。