シンプルな方法で要素を選択する

スタイルを適用するには、CSSでどのHTML要素を対象にするかを指定する必要があります。 これはセレクターを使って行います。 この章では、最も重要な3つのセレクター、タグセレクター、クラスセレクター、IDセレクターに注目します。

タグセレクター

タグセレクターは、特定のHTMLタグのすべての要素を対象にします。
HTML例：

<p>It was all in my head.</p>

CSS例：

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

このルールはページ上のすべての<p>要素に適用されます。

同じ種類のすべての要素に一貫したスタイルを適用したい場合は、タグセレクターを使用します。

クラスセレクタ

クラスセレクタは、同じクラス名を持つ要素を対象とします。
HTML:

<p class="text">This song is another hit.</p>

CSSでは、クラス名の前にピリオド（.）を付けてスタイルを指定します:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

class="text" を持つ要素だけがこれらのスタイルを適用されます。

クラスセレクタは、柔軟かつ再利用可能なスタイリングが可能なため、実際のプロジェクトで最もよく使われるセレクタです。

複数クラス

1つの要素に複数のクラスを指定できます。
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

要素が両方のクラスを持つ場合、両方のセレクタのスタイルが適用されます。

この仕組みにより、クラスベースのスタイリングは強力になります。

<p> クラスと text クラスの両方を持つ font 要素は、両方のセレクターからスタイルを受け取る。text クラスは色をネイビーに設定し、font クラスはフォントサイズを24pxに設定。

IDセレクター

IDセレクターは、1つのユニークな要素を対象とする。

HTMLでは、要素に id 属性を追加：

<p id="title">Choose from different themes.</p>

CSSでは、ハッシュ記号（#）でIDを参照してスタイルを定義：

#title {
  font-weight: 500;
  font-size: 20px;
}

IDはページ内で一意である必要がある。

IDはスタイリングにも使用できるが、一貫性と再利用性のために通常はクラスが推奨される。