【CSS】CSSセレクタの種類と使い方

2024.08.22
CSS

CSS（Cascading Style Sheets）は、ウェブページのスタイルを定義するための強力なツールです。
その中心となるのがセレクタの概念です。
セレクタは、特定のHTML要素にスタイルを適用するために使用されます。
この記事では、CSSセレクタの種類とその使い方について詳しく説明します。

1. 1. 基本セレクタ
2. 2. 属性セレクタ
3. 3. 擬似クラスと擬似要素セレクタ
4. 4. 結合セレクタ
5. まとめ

1. 基本セレクタ

基本セレクタは、CSSのスタイルを特定のHTML要素に適用するための最も基本的な方法です。
これらのセレクタには、要素セレクタ、クラスセレクタ、IDセレクタが含まれます。

要素セレクタ

要素セレクタは、指定されたHTMLタグのすべてのインスタンスにスタイルを適用します。
例えば、すべての<p>要素に対してスタイルを適用する場合、次のように記述します。

p {
    color: blue;
    font-size: 16px;
}

このコードは、ページ内のすべての<p>タグのテキストを青色にし、フォントサイズを16pxにします。

クラスセレクタと要素セレクタの組み合わせ

クラスセレクタは、特定のクラス属性を持つ要素にスタイルを適用します。
クラスセレクタは、ドット（`.`）の後にクラス名を続けて記述します。
また、クラスセレクタと要素セレクタを組み合わせて使用することで、特定の要素にのみスタイルを適用することができます。

.highlight {
    background-color: yellow;
}

p.highlight {
    color: red;
    font-weight: bold;
}

この例では、`.highlight`クラスが適用された要素に対して背景色を黄色に設定しています。
また、`p.highlight`セレクタを使用することで、<p>要素で`.highlight`クラスが適用されたものに対して、文字色を赤にし、フォントを太字にしています。

IDセレクタ

IDセレクタは、特定のID属性を持つ要素にスタイルを適用します。
IDセレクタは、ハッシュ記号（`#`）の後にID名を続けて記述します。
IDセレクタは、通常、ページ内で一意であるべき要素に使用されます。

#header {
    background-color: lightgray;
}

このスタイルを適用するには、HTML内で要素にid属性を追加します。

<div id="header">これはヘッダーです。</div>

IDセレクタは、ページ内で一意の要素に使用されるべきです。
つまり、同じIDを複数の要素に割り当てることは避けるべきです。

IDセレクタとクラスセレクタの使い分け

IDセレクタとクラスセレクタは、どちらもスタイルを適用するために使用されますが、異なる目的で使用されます。

IDセレクタ: ページ内で一意の要素に使用します。例えば、ページに一つだけ存在するヘッダーやフッターのスタイルを定義する場合に適しています。
クラスセレクタ: 複数の要素に共通のスタイルを適用したい場合に使用します。例えば、特定のデザインやフォーマットを複数の段落やボタンに適用する場合に便利です。

以下に、IDセレクタとクラスセレクタを使い分ける例を示します。

#main-title {
    font-size: 24px;
    color: navy;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

この例では、`#main-title`はページ内で一つしかないタイトル要素に適用され、`font-size`や`color`が設定されています。
一方、`.highlight`クラスは、強調表示したい複数の要素に適用され、背景色とフォントの太さを指定しています。

2. 属性セレクタ

属性セレクタは、特定の属性や属性値を持つHTML要素にスタイルを適用するための強力な手段です。
これにより、要素が持つ属性に基づいて、より細かくスタイルを制御できます。
属性セレクタにはさまざまな種類があり、特定の属性を持つ要素や、属性値に部分一致する要素を選択することができます。

属性値が特定の値と一致するセレクタ

属性セレクタの最も基本的な形式は、特定の属性値を持つ要素にスタイルを適用するものです。
たとえば、`type`属性が`text`であるすべての`<input>`要素にスタイルを適用する場合、次のように記述します。

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

このセレクタは、すべての`<input>`要素で`type`属性が`text`に設定されているものに対して、1ピクセルの黒い枠線を適用します。

属性値が部分一致するセレクタ

属性値が特定の部分文字列を含む要素を選択することも可能です。
たとえば、`href`属性に`example`という文字列が含まれているすべての`<a>`タグにスタイルを適用するには、次のように記述します。

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

このセレクタは、`href`属性に`example`が含まれているすべてのリンクのテキストを緑色にします。

属性値が特定の値で始まる要素を選択するセレクタ

属性値が特定の値で始まる要素を選択するセレクタを使用することもできます。
例えば、`href`属性が`https`で始まるすべての`<a>`タグにスタイルを適用する場合、次のように記述します。

a[href^="https"] {
    font-weight: bold;
}

このセレクタは、`href`属性が`https`で始まるすべてのリンクを太字にします。
これにより、セキュアなリンク（`https`）を他のリンクと視覚的に区別することができます。

属性値が特定の値で終わる要素を選択するセレクタ

属性値が特定の値で終わる要素を選択するセレクタもあります。
例えば、`src`属性が`.png`で終わるすべての`<img>`タグにスタイルを適用する場合、次のように記述します。

img[src$=".png"] {
    border-radius: 8px;
}

このセレクタは、`src`属性が`.png`で終わるすべての画像に対して、角を丸めるスタイル（ボーダーの半径を8ピクセルに設定）を適用します。

属性値が複数の条件を満たす場合のセレクタ

複数の条件を満たす属性セレクタも利用可能です。
たとえば、`type`属性が`submit`であり、`name`属性が`send`であるすべての`<input>`要素にスタイルを適用する場合、次のように記述します。

input[type="submit"][name="send"] {
    background-color: blue;
    color: white;
}

このセレクタは、`type`属性が`submit`であり、さらに`name`属性が`send`であるすべての送信ボタンに対して、背景色を青、文字色を白に設定します。

属性セレクタとクラスセレクタの組み合わせ

属性セレクタはクラスセレクタと組み合わせることで、さらに詳細なスタイルの適用が可能です。
特定のクラスを持つ要素の中で、さらに属性に基づいてスタイルを適用したい場合に有効です。

例えば、`button`クラスを持つ要素の中で、`type`属性が`submit`であるものに特別なスタイルを適用するには、次のように記述します。

button[type="submit"].primary {
    background-color: green;
    color: white;
}

このセレクタは、`button`クラスを持つ要素のうち、`type`属性が`submit`であり、さらに`primary`クラスが適用された要素に対して、背景色を緑、文字色を白に設定します。

3. 擬似クラスと擬似要素セレクタ

擬似クラスと擬似要素セレクタは、特定の状態や要素の一部にスタイルを適用するためのCSSの強力な機能です。
これにより、ユーザーの操作や要素の特定部分に応じたデザインを簡単に実現できます。
擬似クラスは、特定の条件や状態に基づいてスタイルを適用し、擬似要素は要素の一部にスタイルを適用します。

擬似クラスセレクタ

擬似クラスセレクタは、要素が特定の状態にあるときにスタイルを適用するために使用されます。
以下に、いくつかの代表的な擬似クラスを紹介します。

:hover

:hoverセレクタは、ユーザーが要素にカーソルを合わせたときにスタイルを適用します。
これにより、ボタンやリンクがマウスオーバー時に変化する視覚効果を実現できます。

.button:hover {
    color: red;
    text-decoration: underline;
}

この例では、`.button`クラスが適用された要素にカーソルを合わせたときに、テキストの色が赤くなり、下線が追加されます。

:nth-child(n)

:nth-child()セレクタは、親要素の中で特定の順番に位置する子要素にスタイルを適用します。
このセレクタは、偶数や奇数の要素に異なるスタイルを適用する場合に便利です。

.list-item:nth-child(odd) {
    background-color: #f2f2f2;
}

この例では、`.list-item`クラスが適用されたリスト項目のうち、奇数番目の項目に対して背景色が淡い灰色に設定されます。

擬似要素セレクタ

擬似要素セレクタは、要素の特定の部分にスタイルを適用するために使用されます。
擬似要素セレクタを使用することで、要素内のテキストの前や後ろにコンテンツを追加したり、特定の部分にスタイルを適用したりすることができます。

::before

::beforeセレクタは、指定された要素の内容の前にコンテンツを追加します。
これにより、追加の装飾やアイコンなどを簡単に挿入できます。

.note::before {
    content: "注意: ";
    font-weight: bold;
    color: red;
}

この例では、`.note`クラスが適用された要素の前に「注意: 」というテキストが赤字で追加されます。

::after

::afterセレクタは、指定された要素の内容の後にコンテンツを追加します。
これにより、追加の注釈や記号を簡単に挿入できます。

.note::after {
    content: " [終わり]";
    font-weight: bold;
}

この例では、`.note`クラスが適用された要素の後ろに「 [終わり]」というテキストが追加されます。

擬似クラスとクラスセレクタの組み合わせ

擬似クラスはクラスセレクタと組み合わせて使用することができます。
これにより、特定のクラスにのみ適用される擬似クラスのスタイルを設定することが可能です。

button.primary:hover {
    background-color: darkblue;
    color: white;
}

この例では、`.primary`クラスが適用されたボタンに対して、マウスオーバー時に背景色が濃い青色に、文字色が白に変わるスタイルが適用されます。

擬似要素とクラスセレクタの組み合わせ

擬似要素もクラスセレクタと組み合わせることで、特定のクラスを持つ要素に対してだけ擬似要素を適用することができます。

.alert::before {
    content: "警告: ";
    color: red;
    font-weight: bold;
}

この例では、`.alert`クラスが適用された要素の前に「警告: 」というテキストが赤字で追加されます。

4. 結合セレクタ

結合セレクタは、複数のセレクタを組み合わせて、より詳細な要素の選択を可能にするCSSの強力な機能です。
これにより、特定の条件を満たす要素に対してのみスタイルを適用することができます。
主に、子孫セレクタ、子セレクタ、隣接セレクタ、一般兄弟セレクタの4種類があります。

子孫セレクタ

子孫セレクタは、指定された祖先要素内のすべての指定された子孫要素にスタイルを適用します。
これにより、特定の親要素の中にあるすべての特定の子要素にスタイルを適用することができます。

.container p {
    color: red;
}

この例では、`.container`クラスが適用された要素の中にあるすべての<p>要素のテキストが赤色に設定されます。

子セレクタ

子セレクタは、指定された親要素の直接の子要素にスタイルを適用します。
子セレクタは、より限定的なスタイルの適用を可能にします。

.list > li {
    list-style-type: none;
}

この例では、`.list`クラスが適用された要素の直接の子であるすべての<li>要素に対してリストマーカーが表示されないように設定されています。

隣接セレクタ

隣接セレクタは、指定された要素に直接続く兄弟要素にスタイルを適用します。
隣接セレクタは、兄弟要素のうち最初の要素にのみスタイルを適用する場合に使用します。

.header + p {
    margin-top: 20px;
}

この例では、`.header`クラスが適用された要素に直接続く最初の<p>要素に対して、上部に20ピクセルの余白を設定します。

一般兄弟セレクタ

一般兄弟セレクタは、指定された要素に続くすべての兄弟要素にスタイルを適用します。
これにより、同じ親要素を持つ兄弟要素全体にスタイルを適用することができます。

.header ~ p {
    color: gray;
}

この例では、`.header`クラスが適用された要素に続くすべての<p>要素のテキストを灰色に設定します。

まとめ

CSSセレクタは、ウェブデザインにおいてスタイルを細かく制御するための非常に強力なツールです。
基本セレクタから始まり、属性セレクタ、擬似クラスや擬似要素、そして結合セレクタに至るまで、それぞれが特定の用途に適しています。

基本セレクタは、要素、クラス、IDといった単純なターゲットに対してスタイルを適用するために使用されます。
これにより、ページ全体にわたって一貫したデザインが保たれます。

属性セレクタは、特定の属性を持つ要素に対してスタイルを適用するために利用され、特定の条件を満たす要素に対してさらに細かいスタイルの制御が可能です。

擬似クラスと擬似要素は、ユーザーの操作や要素の特定部分に基づいてスタイルを動的に変化させることができ、インタラクティブで魅力的なウェブ体験を提供します。

結合セレクタは、複数のセレクタを組み合わせることで、さらに高度な条件を満たす要素に対してスタイルを適用できるため、複雑なレイアウトやデザイン要件にも対応可能です。

これらのセレクタを適切に組み合わせることで、洗練された、ユーザーフレンドリーなウェブデザインを実現することができます。
CSSセレクタの理解と活用は、デザインの質を高め、効率的なスタイル管理を可能にする重要なスキルです。

前の記事
記事がありません
次の記事

【CSS】レスポンシブデザインのためのCSSメディアクエリ 2024.08.22