CSSセレクタの複数指定方法と使い方を解説

はじめに
●CSSセレクタとは？
●セレクタの複数指定方法
●セレクタの組み合わせ
●応用例
- ○ヘッダー部分のスタイルを変更する
- ○フォームのスタイルを変更する
まとめ

はじめに

CSSはHTMLにスタイルを与えるために欠かせない技術です。

CSSにはセレクタという機能があり、特定の要素を指定してスタイルを適用することができます。

本記事では、そのセレクタにおいて複数の要素を指定する方法について、初心者にもわかりやすく解説します。

●CSSセレクタとは？

CSSセレクタとは、HTML要素に対してCSSでスタイルを適用するために指定するものです。セレクタによって、要素の種類や属性、IDやクラスなどを指定することができます。

例えば、次のようなセレクタがあります。

p { color: red; }

このセレクタは、HTML内の<p>タグにスタイルを適用するもので、文字色を赤色にします。

●セレクタの複数指定方法

CSSでは、特定の要素や要素群にデザインやレイアウトを適用するための”セレクタ”という機能を利用します。

このセレクタを使用することで、具体的なHTML要素や、特定の条件に一致する要素群に対して、スタイルを効果的に適用することができるようになります。

特に、複数の要素や特定の関係にある要素を指定したい場合、セレクタの使い方を知っていると、非常に効率的なスタイリングが可能になります。

○カンマ区切りで指定する方法

カンマ区切りで要素を指定することができます。

例えば、次のように書くことで、<p>タグと<h1>タグにスタイルを適用することができます。

p, h1 {
  color: red;
}

このコードは、<p>タグと<h1>タグ、つまり段落と大見出しのテキストカラーを赤色に変更するものです。

,（カンマ）を用いることで、複数の要素に同じスタイルを一度に適用することができるのです。

○親子関係を指定する方法

セレクタにスペースを入れることで、親子関係を指定することができます。

例えば、次のように書くことで、<div>タグの中にある<p>タグにスタイルを適用することができます。

div p {
  color: red;
}

このコードは、<div>タグの中に含まれる<p>タグ、すなわち<div>の子要素としての段落のテキストカラーを赤色にするものです。

このようにスペースを使うことで、特定の親要素の中の子要素だけを対象としたスタイリングができます。

○同一階層の要素を指定する方法

セレクタに+を入れることで、同一階層の要素を指定することができます。

例えば、次のように書くことで、<p>タグの直後にある`<h1>`タグにスタイルを適用することができます。

p + h1 {
  color: red;
}

このコードは、<p>タグの直後に続く<h1>タグのテキストカラーを赤にするものです。

このように+を使うことで、特定の要素のすぐ後に続く要素のみを対象としたスタイリングが行えます。

○同一クラスの要素を指定する方法

セレクタに.を入れることで、同一クラスの要素を指定することができます。

例えば、次のように書くことで、クラスがexampleである要素にスタイルを適用することができます。

.example {
  color: red;
}

このコードは、class="example"というクラスが付与されたどんな要素でも、テキストカラーを赤色にするものです。

.をクラス名の前に付けることで、そのクラスを持つ要素を指定してスタイリングすることができます。

●セレクタの組み合わせ

CSSでは、特定の要素や要素のグループを指定してスタイルを適用するために、セレクタと呼ばれるものを使用します。

これにより、Webページの見た目やレイアウトを自由にカスタマイズできるようになります。

しかし、セレクタは多岐にわたり、その組み合わせ方や指定方法によって、さまざまな要素をピンポイントで狙うことができます。

これからいくつかの基本的なセレクタの組み合わせ方を詳しく解説していきます。

○カンマ区切りで指定する方法

h1, h2 { color: red; }

このコードは、<h1>タグと<h2>タグの両方に、文字色を赤色にするスタイルを適用しています。

カンマで複数のセレクタを区切ることにより、それらのセレクタ全てに指定したスタイルを一度に適用することができるのです。

○親子関係を指定する方法

div p { color: red; }

このコードは、<div>タグの中にネストされている全ての<p>タグ、つまり子要素としての<p>タグに、文字色を赤色にするスタイルを適用します。

スペースを使ってセレクタを続けることで、そのセレクタの階層関係、すなわち親子関係を示すことができるのです。

○同一階層の要素を指定する方法

p + h1 { color: red; }

このコードは、<p>タグの直後に位置する<h1>タグ、すなわち同じ階層にある隣接する<h1>タグに、文字色を赤色にするスタイルを適用します。

+を使うことで、特定の要素の直後にある要素を指定することができます。

○同一クラスの要素を指定する方法

.example { color: red; }

このコードは、クラス属性がexampleである任意の要素、例えば<div class="example">や<p class="example">などに、文字色を赤色にするスタイルを適用します。

.で始まるセレクタはクラスを指定することを意味し、この方法を用いると、HTML内で同じクラス名を持つ複数の要素に対して、一括してスタイルを適用することができます。

●応用例

セレクタの複数指定方法を使うことで、より複雑なスタイルを実現することができます。

下記に、実際のウェブページにおける応用例を紹介します。

○ヘッダー部分のスタイルを変更する

下記のコードは、ウェブページのヘッダー部分とフォームのデザインに関するものです。

/* 背景色を灰色にする */
.header {
  background-color: #ccc;
}

/* ヘッダー内のh1タグにスタイルを適用する */
.header h1 {
  font-size: 36px;
  color: white;
  text-align: center;
}

/* ヘッダー内のnav要素にスタイルを適用する */
.header nav {
  display: flex;
  justify-content: center;
}

/* ヘッダー内のnav要素内のli要素にスタイルを適用する */
.header nav li {
  margin: 0 10px;
}

/* ヘッダー内のnav要素内のa要素にスタイルを適用する */
.header nav a {
  color: white;
  text-decoration: none;
}

このコードは、背景色が灰色のヘッダーを作成し、ヘッダー内のタイトルやナビゲーションメニューにスタイルを適用しています。

○フォームのスタイルを変更する

下記のコードは、フォームとその内部の各要素（ラベル、テキストボックス、ボタン）にスタイルを適用する方法を表しています。

/* フォーム全体にスタイルを適用する */
form {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ラベルにスタイルを適用する */
label {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}

/* テキストボックスにスタイルを適用する */
input[type="text"] {
  width: 400px;
  height: 30px;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* ボタンにスタイルを適用する */
button {
  margin-top: 30px;
  width: 200px;
  height: 40px;
  background-color: blue;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

/* ボタンにカーソルを合わせた時のスタイルを適用する */
button:hover {
  background-color: #0066cc;
}

このコードは、フォーム全体にスタイルを適用し、ラベルやテキストボックス、ボタンにもスタイルを適用しています。