CSSセレクタの使い方ガイド:具体例を交えて理解しよう

CSSセレクタの使い方ガイド:具体例を交えて理解しよう

CSSセレクタは、HTML要素をターゲットにしてスタイルを適用するための非常に強力なツールです。セレクタを上手に使うことで、効率的に特定の要素にスタイルを適用できます。このガイドでは、よく使われるCSSセレクタを具体的な例とともに紹介します。


1. 基本セレクタ

1.1. 要素セレクタ

要素セレクタは、特定のHTMLタグを選択するために使用します。

p {
color: blue;
}

この例では、すべての<p>タグに対して青い文字色が適用されます。

1.2. クラスセレクタ

クラスセレクタは、特定のクラスが付けられた要素にスタイルを適用するために使用します。

.button {
background-color: #4CAF50;
color: white;
}

この例では、クラス名buttonが付けられたすべての要素に緑色の背景と白い文字色が適用されます。

1.3. IDセレクタ

IDセレクタは、特定のIDを持つ要素にスタイルを適用するために使用します。IDはページ内で一意である必要があります。

#header {
font-size: 24px;
font-weight: bold;
}

この例では、IDがheaderの要素にスタイルが適用されます。


2. 複合セレクタ

2.1. 子孫セレクタ

子孫セレクタは、ある要素の内部にある全ての要素をターゲットにします。スペースで区切られた2つ以上のセレクタを使います。

div p {
color: red;
}

この例では、<div>タグ内のすべての<p>タグに赤い文字色が適用されます。

2.2. 直下の子セレクタ(>

直下の子セレクタは、親要素の直下にある子要素をターゲットにします。

div > p {
color: green;
}

この例では、<div>タグ内の直下の<p>タグにのみ緑色の文字色が適用されます。div内にある子孫の<p>タグには適用されません。

2.3. 隣接兄弟セレクタ(+

隣接兄弟セレクタは、特定の要素の直後にある兄弟要素をターゲットにします。

h2 + p {
margin-top: 20px;
}

この例では、<h2>タグの直後に現れる<p>タグにのみマージンが適用されます。

2.4. 一般兄弟セレクタ(~

一般兄弟セレクタは、特定の要素の後に続く全ての兄弟要素にスタイルを適用します。

h2 ~ p {
color: purple;
}

この例では、<h2>タグの後に続くすべての<p>タグに紫色の文字色が適用されます。


3. 擬似クラスセレクタ

擬似クラスは、要素の状態や位置に応じてスタイルを適用するために使用します。

3.1. :hover

:hoverは、要素にマウスオーバーしたときにスタイルを適用します。

a:hover {
color: red;
}

この例では、リンクにマウスを乗せたときに文字色が赤に変わります。

3.2. :first-child

:first-childは、親要素の最初の子要素をターゲットにします。

ul li:first-child {
font-weight: bold;
}

この例では、<ul>内の最初の<li>要素に太字が適用されます。

3.3. :last-child

:last-childは、親要素の最後の子要素をターゲットにします。

ul li:last-child {
color: green;
}

この例では、<ul>内の最後の<li>要素に緑色が適用されます。

3.4. :nth-child()

:nth-child()は、親要素内の特定の順番の子要素にスタイルを適用します。例えば、偶数番目や奇数番目の要素をターゲットにできます。

ul li:nth-child(odd) {
background-color: #f0f0f0;
}

ul li:nth-child(even) {
background-color: #e0e0e0;
}

この例では、<ul>内の奇数番目の<li>要素に薄い灰色の背景色、偶数番目の<li>要素に少し濃い灰色の背景色が適用されます。


4. 擬似要素セレクタ

擬似要素セレクタは、要素の内容の前や後にコンテンツを追加したり、要素の一部にスタイルを適用したりするために使用します。

4.1. ::before

::beforeは、要素の内容の前にコンテンツを挿入するために使用します。

p::before {
content: "※ ";
color: red;
}

この例では、すべての<p>タグの前に赤色の「※」が追加されます。

4.2. ::after

::afterは、要素の内容の後にコンテンツを挿入するために使用します。

p::after {
content: " (終了)";
color: blue;
}

この例では、すべての<p>タグの後に青色の「(終了)」が追加されます。

5. 高度なCSSセレクタ

5.1. :not() セレクタ

:not()セレクタは、指定した条件を満たさない要素をターゲットにします。特定の要素を除外したいときに便利です。

div:not(.exclude) {
background-color: lightgray;
}

この例では、class="exclude"が付けられていないすべての<div>タグに背景色が適用されます。

5.2. :has() セレクタ(CSS4)

:has()セレクタは、特定の子要素を持つ親要素をターゲットにすることができます。親要素に対するスタイルを条件付きで適用する場合に使用します。このセレクタはCSS4で導入されており、ブラウザの対応状況を確認する必要があります。

article:has(h2) {
border: 2px solid blue;
}

この例では、<article>タグ内に<h2>タグが含まれている場合に、その<article>に青い枠線が適用されます。

注意: :has()は、現在のブラウザでのサポート状況が限定的なので、使用には注意が必要です。

5.3. 属性セレクタ

属性セレクタは、特定の属性を持つ要素をターゲットにします。

5.3.1. [attribute]

指定した属性を持つすべての要素にスタイルを適用します。

a[target] {
color: orange;
}

この例では、target属性を持つすべての<a>タグにオレンジ色が適用されます。

5.3.2. [attribute="value"]

指定した属性とその値を持つ要素にスタイルを適用します。

input[type="text"] {
border: 1px solid #ccc;
}

この例では、type="text"属性を持つ<input>タグに枠線が適用されます。


6. まとめ

CSSセレクタは、特定の要素をターゲットにしてスタイルを適用するための強力なツールです。基本的なセレクタに加えて、:not():has()、属性セレクタなどの高度なセレクタを使いこなすことで、より精緻なスタイル指定が可能になります。これらを上手に組み合わせることで、効率的で柔軟なスタイリングが実現できます。

これで、CSSセレクタのさまざまな種類と使い方を理解できたと思います。目的に合わせてセレクタを選び、スタイルを適用する際に活用してください!