CSSセレクタとは？

CSSセレクタとは、HTMLの要素を選んでスタイルを適用するための「ターゲット指定」のようなものです。Webページを構成するHTMLには、見出しや段落、画像など様々な要素が含まれていますが、それらに対して「どの部分にデザイン（スタイル）を適用するか」を指定する必要があります。これを行うのがCSSセレクタです。

例えば、HTMLの中のすべての見出し（<h1>タグ）を青色にしたい場合、CSSセレクタとしてh1を指定し、そのスタイルを設定します。

基本的なCSSセレクタの例

要素セレクタ
すべての指定したHTML要素にスタイルを適用します。
例:

p { color: red; }

→ すべての段落(<p>)が赤色になります。

クラスセレクタ
特定のクラス属性を持つ要素にスタイルを適用します。クラス名はドット（.）で指定します。
例:

.example { font-size: 20px; }

→ class=”example”と指定された要素が文字サイズ20pxになります。

IDセレクタ
特定のID属性を持つ要素にスタイルを適用します。ID名はハッシュ（#）で指定します。
例:

#header { background-color: yellow; }

→ id=”header”を持つ要素の背景色が黄色になります。

CSSセレクタはこのように、ページ内の要素を選び、自由にデザインやレイアウトを変更するための重要なツールです。
本記事では意外と便利だけど意外と知られていないCSSセレクタについて紹介していきます。

意外なセレクタたち

~（チルダ）

チルダ（~）は、ある要素に続く兄弟要素全てに対してスタイルを適用するためのセレクタです。兄弟要素とは、同じ親要素を持つ要素のことです。このセレクタは、指定した要素以降の兄弟要素に適用されるため、特定の範囲だけにスタイルを反映させたい場合に便利です。
例:

h2 ~ p {
color: green;
}

→ <h2>要素の後に続くすべての段落（<p>）が緑色になります。
このように、特定の要素以降の兄弟要素に対して一括でスタイルを適用したいときに使います。

+（プラス）

プラスセレクタ（+）は、直後の兄弟要素に対してスタイルを適用します。これも兄弟要素を対象にしますが、チルダセレクタと異なり、すぐ次に続く要素だけが対象です。特定の要素に隣接する部分だけをスタイリングしたいときに役立ちます。
例:

h2 + p {
font-weight: bold;
}

→ <h2>の直後にある段落（<p>）だけが太字になります。
直後の要素だけを対象にする場合、このプラスセレクタが非常に便利です。

nth-child

nth-childセレクタは、親要素の中で特定の順番にある要素にスタイルを適用することができます。数字やキーワードを使って、1番目、2番目、あるいは奇数・偶数など、様々な条件で要素を選択できます。
例:

li:nth-child(2) {
background-color: lightblue;
}

→ リスト（<li>）の2番目の要素だけが青色の背景になります。
また、nth-child(odd)やnth-child(even)を使うことで、奇数番目や偶数番目の要素にスタイルを適用することもできます。
例:

li:nth-child(odd) {
background-color: lightgray;
}

→ リストの奇数番目の項目が灰色の背景になります。

*（アスタリスク）

*（アスタリスク）は、すべての要素にスタイルを適用するためのセレクタです。特定の要素を選ぶのではなく、ページ内の全てのHTML要素に一括でスタイルを適用する際に使用します。多くの場合、全要素に同じマージンやパディングのリセットなど、基本的なスタイル設定に使われます。
例:

* {
margin: 0;
padding: 0;
}

→ ページ内のすべての要素のマージンとパディングがリセットされます。
全体的なレイアウトを調整するときなど、ユニバーサルにスタイルを適用する際に便利です。

>（子要素セレクタ）

>は、直下の子要素だけにスタイルを適用するためのセレクタです。親要素の中にあるすべての子要素ではなく、特定の階層にある子要素にのみスタイルを設定したいときに使用します。
例:

div > p {
color: blue;
}

→ <div>の直下にある段落（<p>）要素だけが青色になります。他の階層にある<p>要素には影響しません。
子要素だけにスタイルを適用したい場合、このセレクタが役立ちます。

:not（否定セレクタ）

:not()セレクタは、指定した要素以外にスタイルを適用したいときに使います。つまり、特定の条件を持つ要素を除外し、それ以外のすべての要素にスタイルを適用することができます。
例:

p:not(.highlight) {
font-size: 16px;
}

→ class=”highlight”を持たないすべての段落（<p>）要素が16pxになります。
特定の要素だけを除外してスタイリングする場面で有効です。

:has（子孫要素セレクタ）

:has()は、特定の子要素を持つ親要素をターゲットにするセレクタです。現在のCSSでは使用が制限されていますが、モダンなブラウザではサポートされつつあります。特定の子要素を含む親要素にだけスタイルを適用するため、柔軟なデザインが可能になります。
例:

div:has(img) {
border: 1px solid red;
}

→ 画像（<img>）を含むすべての<div>に赤い枠線が追加されます。
子要素を含む親要素を選択できるので、構造に応じたスタイルを適用する際に便利です。

[*=]（部分一致属性セレクタ）

[*=]セレクタは、特定の文字列を含む属性値を持つ要素にスタイルを適用するためのセレクタです。属性値に特定のキーワードが含まれている要素を選びたい場合に非常に有効です。
例:

a[href*="example"] {
color: green;
}

→ href属性に「example」という文字列が含まれているリンク（<a>）が緑色になります。
部分一致の検索ができるため、より柔軟な属性指定が可能です。

まとめ

これらのセレクタを活用することで、ページ内の要素をさらに柔軟かつ詳細に選択することが可能になります！それぞれのセレクタには特定の使いどころがあり、うまく組み合わせることで、より効率的で洗練されたデザインを実現することができます。CSSセレクタを駆使して、デザインの自由度を広げていきましょう！
それでは良いエンジニアライフを！