セレクタ

セレクタとは、CSSでどの要素にスタイルを適用するかを指定する部分です。

p {
  color: red;
}

この p の部分がセレクタです。「すべての <p> 要素を赤色にする」という意味になります。

基本のセレクタ

よく使うセレクタを3つ紹介します。

要素セレクタ

HTMLのタグ名をそのまま書くセレクタです。該当するタグすべてにスタイルが適用されます。

h1 {
  font-size: 24px;
}

ページ内のすべての <h1> に適用されます。

クラスセレクタ

ドット（.）のあとにクラス名を書きます。最もよく使うセレクタです。

<p class="highlight">重要なテキスト</p>

.highlight {
  background-color: yellow;
}

class="highlight" を持つ要素だけにスタイルが適用されます。

IDセレクタ

シャープ（#）のあとにID名を書きます。

<div id="header">ヘッダー</div>

#header {
  background-color: navy;
}

IDはページ内で1つの要素にしか使えないため、特定の1つの要素だけにスタイルを当てたいときに使います。

セレクタの組み合わせ

セレクタは組み合わせることで、より細かく対象を絞れます。

/* <nav>の中にある<a>だけに適用 */
nav a {
  text-decoration: none;
}
 
/* <ul>の直下の<li>だけに適用（孫要素は対象外） */
ul > li {
  list-style: disc;
}

クラスセレクタを使おう

実際の開発ではクラスセレクタが最もよく使われます。

要素セレクタ（p や div）だけだと、ページ内のすべての該当要素に影響してしまいます。 クラスセレクタなら、スタイルを当てたい要素だけにクラスを付ければいいので、意図しないスタイルの衝突を防げます。

/* △ すべての<p>に適用されてしまう */
p {
  color: red;
}
 
/* ○ 特定の<p>だけに適用できる */
.error-message {
  color: red;
}

IDセレクタ（#）は「詳細度」というCSSの優先順位の仕組みで強くなりすぎるため、スタイル目的ではクラスセレクタを使うのが一般的です。

まとめ