css

selectorについて解説して

もちろん、CSSのセレクタについて詳しく解説するね。セレクタは、HTML要素にスタイルを適用するための方法を指定するためのものです。

CSSセレクタとは？

CSSセレクタは、HTMLドキュメント内の要素を選択し、それに対してスタイルを適用するためのパターンを指定します。セレクタにはいくつかの種類があり、それぞれ異なる方法で要素を選択します。

主なセレクタの種類

  1. 要素セレクタ（Element Selector）
  2. クラスセレクタ（Class Selector）
  3. IDセレクタ（ID Selector）
  4. 属性セレクタ（Attribute Selector）
  5. 擬似クラスセレクタ（Pseudo-class Selector）
  6. 擬似要素セレクタ（Pseudo-element Selector）
  7. コンビネータ（Combinator）

1. 要素セレクタ（Element Selector）

要素セレクタは、指定したタグ名のすべての要素にスタイルを適用します。

p {
    color: blue;
}

上記の例では、すべての<p>要素のテキストカラーが青になります。

2. クラスセレクタ（Class Selector）

クラスセレクタは、特定のクラスを持つすべての要素にスタイルを適用します。クラスセレクタは、クラス名の前にドット（.）を付けて指定します。

.my-class {
    font-size: 18px;
}

<p class="my-class">これはクラスセレクタの例です。</p>

上記の例では、クラス名my-classを持つすべての要素のフォントサイズが18pxになります。

3. IDセレクタ（ID Selector）

IDセレクタは、特定のIDを持つ要素にスタイルを適用します。IDセレクタは、ID名の前にハッシュ（#）を付けて指定します。IDは一意であるため、1つのIDが1つの要素にのみ適用されます。

#my-id {
    background-color: yellow;
}

<div id="my-id">これはIDセレクタの例です。</div>

上記の例では、ID名my-idを持つ要素の背景色が黄色になります。

4. 属性セレクタ（Attribute Selector）

属性セレクタは、特定の属性を持つ要素にスタイルを適用します。属性の存在や値に基づいて選択できます。

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

<input type="text" placeholder="テキスト入力">
<input type="password" placeholder="パスワード入力">

上記の例では、type属性がtextの<input>要素にのみスタイルが適用されます。

5. 擬似クラスセレクタ（Pseudo-class Selector）

擬似クラスセレクタは、要素の特定の状態に基づいてスタイルを適用します。例えば、ホバー時や最初の子要素などに対して使用します。

a:hover {
    color: red;
}

上記の例では、リンク要素にカーソルを合わせたときにテキストカラーが赤になります。

6. 擬似要素セレクタ（Pseudo-element Selector）

擬似要素セレクタは、要素の特定の部分にスタイルを適用します。例えば、最初の文字や行などに対して使用します。

p::first-line {
    font-weight: bold;
}

上記の例では、すべての<p>要素の最初の行が太字になります。

7. コンビネータ（Combinator）

コンビネータは、特定の関係を持つ複数の要素にスタイルを適用します。主なコンビネータは以下の通りです：

  • 子セレクタ（>）: 親要素と直接の子要素の関係を指定します。
  • 子孫セレクタ（ ）: 親要素とそのすべての子孫要素の関係を指定します。
  • 隣接兄弟セレクタ（+）: 特定の要素の直後に続く兄弟要素を指定します。
  • 一般兄弟セレクタ（~）: 特定の要素の後に続くすべての兄弟要素を指定します。
/* 子セレクタ */
div > p {
    color: green;
}

/* 子孫セレクタ */
div p {
    color: blue;
}

/* 隣接兄弟セレクタ */
h1 + p {
    margin-top: 0;
}

/* 一般兄弟セレクタ */
h1 ~ p {
    color: gray;
}

具体的な例

以下は、さまざまなセレクタを使用した具体的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSセレクタの例</title>
    <style>
        /* 要素セレクタ */
        p {
            color: blue;
        }

        /* クラスセレクタ */
        .highlight {
            background-color: yellow;
        }

        /* IDセレクタ */
        #main {
            font-size: 20px;
        }

        /* 属性セレクタ */
        input[type="text"] {
            border: 1px solid #000;
        }

        /* 擬似クラスセレクタ */
        a:hover {
            color: red;
        }

        /* 擬似要素セレクタ */
        p::first-letter {
            font-size: 200%;
        }

        /* コンビネータ */
        div > p {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="main">
        <p>これは通常の段落です。</p>
        <p class="highlight">これはハイライトされた段落です。</p>
        <input type="text" placeholder="テキスト入力">
        <a href="#">これはリンクです</a>
        <div>
            <p>これはdivの直接の子要素です。</p>
            <span>これはdivの直接の子要素ではありません。</span>
        </div>
    </div>
</body>
</html>

まとめ

CSSセレクタは、HTMLドキュメント内の要素を選択し、特定のスタイルを適用するための強力なツールです。セレクタの種類とその使い方を理解することで、効率的かつ効果的なスタイルシートを作成できます。

スポンサーリンク

-css