技術学習

CSSセレクター

📢 この記事は gemini-2.5-flash によって翻訳されました

CSSの導入方法

CSSには3つの導入方法があるんだ。最初の方法は内部スタイルシートで、これは学習目的でしか使わないよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<html>
    <head>
        <title></title>
        <style>
            /* ここにCSSを書くよ */
        </style>
    </head>
    <body>
    </body>
</html>

二番目はインラインスタイルで、これは通常JavaScriptと組み合わせて使うんだ。

1

<div style="ここにCSSを書くよ"></div>

最後は外部スタイルシートで、CSSコードを別のファイルに書いて、linkタグで読み込む方法だね。開発でよく使うよ。

1
2
3
4

<head>
    <title></title>
    <link rel="stylesheet" href="css path" />
</head>

CSSセレクター

セレクターの役割は、タグを探してスタイルを設定することだよ。基本セレクターは全部で4種類あるんだ。

タグセレクター

タグ名をそのままセレクターとして使うと、同じ名前のタグが全部選ばれて、同じスタイルが適用されるよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<html>
    <head>
        <title></title>
        <style>
            div{
                /* 全てのdivタグを選択してスタイルを設定するよ */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

p、h1、div、a、imgなんかのタグが使えるね。

クラスセレクター

タグを探して、表示を差別化するために使うんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<html>
    <head>
        <title></title>
        <style>
            .first{
                /* firstクラスのdivを選択してスタイルを設定するよ */
            }
        </style>
    </head>
    <body>
        <div class="first">
            first div
        </div>
        <div>
            second div
        </div>
    </body>
</html>

クラス名が複数の単語でできてる場合は-でつなげるといいよ。1つのクラスセレクターを複数のタグで使えるし、1つのタグに複数のクラス名を指定することもできるんだ。

1
2
3

<div class="first second">
    二つのクラス名を使ったよ
</div>

idセレクター

タグを探して、表示を差別化するために使うよ。これは普通、JavaScriptと組み合わせて使うんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<html>
    <head>
        <title></title>
        <style>
            #app{
                /* idがappのタグを選択するよ */
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <div></div>
    </body>
</html>

同じidセレクターは1ページにつき1回しか使えないんだ。

ユニバーサルセレクター（全称セレクター）

ページの全てのタグを探して、同じスタイルを設定するやつだよ。これは通常、タグのデフォルトスタイルをリセットするときに使うんだ。

1
2
3
4
5

<style>
    *{
        /* 全てのタグに影響するスタイルを書くよ */
    }
</style>

複合セレクター

定義：2つ以上の基本セレクターが異なる方法で組み合わされたもの。

役割：目的の要素（タグ）をより正確に、より効率的に選択できるよ。

子孫セレクター

ある要素の全ての子孫要素を選択できるんだ。

構文：親セレクター 子セレクター { CSSプロパティ }

親セレクターと子セレクターの間は半角スペースで区切るよ。クラスセレクターやidセレクターも使えるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<style>
    div span{
        color: aqua;
    }
</style>

<span>色は変わらないよ</span>
<div>
    <span>色は変わるよ</span>
    <p>
        <span>色は変わるよ</span>
    </p>
</div>

直下セレクター（子セレクター）

ある要素の直下の子要素だけを選択するよ。

構文：親セレクター > 子セレクター { CSSプロパティ }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style>
    div > span{
        color: aqua;
    }
</style>

<div>
    <span>色は変わるよ</span>
    <p>
        <span>色は変わらないよ</span>
    </p>
</div>

グループセレクター（カンマセレクター）

複数のタググループを選択して、同じスタイルを設定するよ。

構文：セレクター1, セレクター2, ..., セレクターN { CSSプロパティ }

1
2
3
4
5
6
7
8
9

<style>
    div, span, p {
        color: aqua;
    }
</style>

<div>色は変わるよ</div>
<p>色は変わるよ</p>
<span>色は変わるよ</span>

属性セレクター（結合セレクター）

複数の条件を同時に満たす要素を選択するんだ。

構文：セレクター1セレクター2 { CSSプロパティ } セレクター間はスペースなしで続けるよ。

もし結合セレクターにタグセレクターが含まれているなら、タグセレクターは一番最初に書かなきゃいけないんだ。

1
2
3
4
5
6
7
8
9

<style>
    p.box {
        color: aqua;
    }
</style>

<p class="box">色は変わるよ</p>
<p>pタグ、色は変わらないよ</p>
<div class="box">色は変わらないよ</div>

擬似クラスセレクター

擬似クラスは要素の状態を表していて、要素の特定の状態を選択してスタイルを設定するんだ。

マウスホバー状態

構文：セレクター:hover { CSSプロパティ }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<style>
    a:hover{
        color: red;
    }
    .box:hover{
        color: aqua;
    }
</style>

<a href="https://yexca.net">yexca</a>
<div class="box">
    divタグ
</div>

どんなタグでもマウスホバーの状態を設定できるよ。

ハイパーリンクの状態

セレクター役割
:link未訪問時
:visited訪問済み時
:hoverマウスオーバー時
:activeクリック時 (アクティブ時)

もしハイパーリンクに4つの状態を設定するなら、この順番で書かなきゃいけないよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<style>
    a:link {
        color: green;
    }
    a:visited {
        color: red;
    }
    a: hover {
        color: aqua;
    }
    a: active {
        color: orange;
    }
</style>

<a href="#">aタグ</a>

構造擬似クラスセレクター

役割：要素の構造的な関係に基づいて要素を探すんだ。

セレクター説明
E:first-child最初の E 要素を選択するよ
E:last-child最後の E 要素を選択するよ
E:nth-child(N)N番目の E 要素を選択するよ (1から数えるんだ)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<style>
    li:first-child {
        background-color: aqua;
    }
    li:last-child {
        background-color: green;
    }
    li:nth-child(3) {
        background-color: blue;
    }
</style>

<ol>
    <li>aqua</li>
    <li>2</li>
    <li>blue</li>
    <li>4</li>
    <li>green</li>
</ol>

3番目のセレクターは、式を使って複数の要素を選択できるんだ。

機能式
偶数番目のタグ2n
奇数番目のタグ2n+1 または 2n-1
5の倍数のタグを見つける5n
5番目以降のタグを見つける (5番目を含む)n+5
5番目以前のタグを見つける (5番目を含む)-n+5

擬似要素セレクター

役割：仮想要素（擬似要素）を作成して、装飾的なコンテンツを配置するんだ。

セレクター説明
E::beforeE要素の内部の一番前に擬似要素を追加するよ
E::afterE要素の内部の一番後ろに擬似要素を追加するよ

注意点：

  • contentプロパティを設定して、擬似要素の内容を設定する必要があるんだ。内容がなければ、クォーテーションは空にしておいてね。
  • 擬似要素はデフォルトで行内表示モードだよ。
  • 優先度はタグセレクターと同じだよ。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<style>
    div {
        width: 110px;
        height: 30px;
        background-color: aqua;
        font-size: 20px;
    }
    div::before {
        content: 'yexca';
    }
    div::after {
        content: 'blog';
    }
</style>

<div>'</div>
<!-- 内容は yexca'blog になるよ -->
© 2021 - 2026 yexca

Visits Since 2025-02-28

Hugo で構築されています。 | テーマ Stack は Jimmy によって設計されています。