CSS セレクタの一覧とよく使うセレクタ

セレクタは、CSSを適用する場所を指定します。

要素セレクタ(タグセレクタ)

h1 {
    color: red;
  }

HTMLのタグ名がセレクタになります。

クラスセレクタ（最重要）

.box {
    color: red;
  }

<div class="box">123</div>
<div class="box">456</div>

クラスセレクタは、先頭にドット(.)がつきます。
1つのhtml文書内に対象を複数設定できます。

IDセレクタの例

#a2 {
    color: red;
  }

<p id="a2">あいうえお</p>

IDセレクタは、先頭にシャープ(#)がつきます。
1つのhtml文書内で1つだけのユニークなものである必要があります。

子孫セレクタの例

A B {
プロパティ: 値;
}

Aの中に含まれるすべてのB（階層は何段でもOK）が対象になります。

  .container p {
        color: red;
    }

<div class="container">
    <p>123</p>

    <div>
        <p>456</p>
    </div>
</div>

containerクラスの中に含まれるすべてのPタグ(6,8行目)が対象になります。

子セレクタの例

A>B {
プロパティ: 値;
}

Aの直下の子であるBだけが対象になります。

 .container>p {
        color: red;
    }

<div class="container">
    <p>123</p>
    <div>
        <p>456</p>
    </div>
</div>

containerクラスの直下の子であるPタグ(6行目)が対象になります。