CSSセレクタの書き方を初心者にもわかる使い方とサンプルコードで解説

はじめに
●CSSセレクタとは？
●CSSセレクタの書き方
●CSSセレクタの応用例
まとめ

はじめに

CSSはWebページの見た目を設定するスタイルシート言語です。

CSSを使用することで、Webページのレイアウトや色、フォント、アニメーションなどをカスタマイズすることができます。

CSSを使用する際に、セレクタは非常に重要な役割を果たします。

セレクタを正しく使うことで、指定した要素に対してスタイルを適用することができます。

本記事では、CSSセレクタの基礎から、応用例までを解説していきます。

●CSSセレクタとは？

CSSセレクタは、Webページ内のHTML要素を指定する方法です。

CSSセレクタを使用することで、指定した要素にスタイルを適用することができます。

CSSセレクタは、要素名、クラス名、ID名、属性名、疑似クラス、疑似要素などを使用して指定します。

●CSSセレクタの書き方

CSSセレクタは、要素名、クラス名、ID名、属性名、疑似クラス、疑似要素などを使用して指定します。

セレクタは、スタイルを適用したいHTML要素に対して指定します。

○要素名によるセレクタ

最初に紹介するのは、要素名によるセレクタです。

これは最も基本的なセレクタで、特定のHTML要素全体にスタイルを適用する場合に使用します。

/* h1要素にスタイルを適用する */
h1 {
  color: red;
}

このコードは、ページ内のすべてのh1要素（通常は主要な見出し）のテキスト色を赤に設定します。

h1はHTMLの見出し要素を指し、color: red;はその色を赤に指定する命令です。

○クラス名によるセレクタ

次に、クラス名によるセレクタの解説に移ります。

クラスは、HTML要素に独自の識別子として追加することができるもので、特定のグループの要素にスタイルを適用するのに役立ちます。

/* クラス名「sample」が付与された要素にスタイルを適用する */
.sample {
  background-color: yellow;
}

このコードは、sampleというクラス名が付与されたすべての要素の背景色を黄色に設定します。HTML内でこのクラスを持つ要素は、この黄色の背景を持つことになります。

○ID名によるセレクタ

続いて、ID名によるセレクタを解説します。

IDはページ内で一意である必要があり、特定の単一の要素をターゲットにする場合に使用されます。

/* ID名「main-title」が付与された要素にスタイルを適用する */
#main-title {
  font-size: 24px;
}

このコードは、main-titleというIDが付与された要素のフォントサイズを24ピクセルに設定します。

IDは通常、ページ内で一度しか使用されませんので、このスタイルはその特定の要素にのみ適用されます。

○属性によるセレクタ

次に、属性によるセレクタについて説明します。

これは、特定の属性とその値を持つ要素にスタイルを適用する場合に使用されます。

属性名は、「[属性名]」を指定します。
属性名に加えて、属性値も指定することができます。

「[属性名=’属性値’]」という形式で指定します。

/* alt属性に値「logo」が付与されたimg要素にスタイルを適用する */
img[alt='logo'] {
  width: 200px;
}

このコードは、alt属性の値がlogoであるimg要素の幅を200ピクセルに設定します。

このようにして、特定の属性を持つ要素のみにスタイルを適用することができます。

○疑似クラスによるセレクタ

疑似クラスによるセレクタも非常に便利です。

これは、要素の特定の状態（例：マウスオーバー時）にスタイルを適用する場合に使用されます。

/* マウスが乗った時の状態でスタイルを適用する */
a:hover {
  color: blue;
}

このコードは、マウスカーソルがリンク上に置かれたとき、そのリンクのテキスト色を青に変更します。

このように疑似クラスを使用すると、要素の特定の状態や動作に応じてスタイルを動的に変更できます。

○疑似要素によるセレクタ

最後に、疑似要素によるセレクタを紹介します。

これは、要素の特定の部分（例：テキストの前後）にスタイルやコンテンツを追加する場合に使用されます。

/* テキストの前に「※」を追加する */
p::before {
  content: "※";
}

このコードは、すべての段落(p)要素のテキストの前に「※」記号を追加します。

疑似要素を使用すると、実際のHTMLコンテンツを変更することなく、ビジュアルなエフェクトや追加のコンテンツをページに追加できます。

●CSSセレクタの応用例

CSSセレクタを応用することで、より高度なスタイルの適用が可能になります。

ここでは、CSSセレクタの応用例をいくつか紹介します。

○子要素のセレクタ

子要素のセレクタは、「親要素子要素」のように指定します。

このセレクタを使用することで、親要素の中にある子要素に対してスタイルを適用することができます。

/* ul要素内のli要素にスタイルを適用する */
ul li {
  color: blue;
}

このコードは、ul要素内のli要素すべてにブルーのテキストカラーを適用しています。

具体的に言うと、ul要素の子として存在するすべてのli要素がこのスタイルの対象となります。

これは、例えば、項目リストの中の各項目を特定の色にしたい場合などに非常に役立ちます。

○複数のクラス名によるセレクタ

複数のクラス名によるセレクタは、「.class1.class2」のように指定します。

このセレクタを使用することで、複数のクラス名が付与された要素に対してスタイルを適用することができます。

/* class1とclass2が付与された要素にスタイルを適用する */
.class1.class2 {
  font-size: 20px;
}

このコードは、同時に.class1と.class2の2つのクラス名が付与された要素に、フォントサイズとして20pxを適用しています。

これにより、特定の条件下で特定のスタイルを持つ要素を明確に指定することができます。

○兄弟要素のセレクタ

兄弟要素のセレクタは、「要素1 ~ 要素2」のように指定します。

このセレクタを使用することで、要素1と同じ階層にある要素2に対してスタイルを適用することができます。

/* h1要素の後ろにあるp要素にスタイルを適用する */
h1 ~ p {
  color: green;
}

このコードは、h1要素の後ろにあるp要素すべてに緑色のテキストカラーを適用しています。

これは、例えば、見出しの後の段落に特定のスタイルを適用したい場合などに使用できます。

○最後の要素にだけスタイルを適用する

最後の要素にだけスタイルを適用するには、:last-childを使用します。

/* ul要素内の最後のli要素にスタイルを適用する */
ul li:last-child {
  font-weight: bold;
}

このコードは、ul要素内の最後のli要素だけに太字のスタイルを適用しています。

これは、リストの最後の項目を強調する場合などに役立ちます。

○クラス名に一部分が含まれる要素にスタイルを適用する

クラス名に一部分が含まれる要素にスタイルを適用するには、^=や$=、*=を使用します。

/* class1で始まるクラス名が付与された要素にスタイルを適用する */
[class^='class1'] {
  background-color: yellow;
}

/* class1で終わるクラス名が付与された要素にスタイルを適用する */
[class$='class1'] {
  background-color: green;
}

/* class1を含むクラス名が付与された要素にスタイルを適用する */
[class*='class1'] {
  background-color: blue;
}

このコードでは、それぞれクラス名がclass1で始まる要素、class1で終わる要素、class1を含む要素に対して、背景色を適用しています。

このようなセレクタは、特定の命名規則に従ったクラスを持つ要素に対して、一括してスタイルを適用する際などに非常に役立ちます。