基礎15. セレクタの種類(要素セレクタ、IDセレクタ、Classセレクタ)

要素セレクタ(タイプセレクタ)

要素名で指定するセレクタです。
指定した要素すべてが対象となるため、CSSのリセットや初期設定に利用します。
CSSリセットや初期設定の場合は、最初に読み込まれるように先頭にまとめて指定します。
他には16章で解説する子セレクタ、子孫セレクタで対象をさらに絞りこむ場合に使用します。


@charset "UTF-8";
/* 初期設定 */
h1{
  font-size: 24px;
}
p{
  font-size: 16px;
  color: #333333;
}

IDセレクタ

ID属性で指定した値(名前)をセレクタで指定します。
セレクタで指定する時は、ID名の前に#(シャープ)を付けます。


<p id="sec">段落</p>


#sec{
	color: #333333;
}

ID属性は、すべてのタグで使用できます。
ID名は、命名ルールで問題にならなければ、自由につけることができます。
注意点として、ページ単位で、ID名が重複してはいけません。
※ページが違えば、再利用できます。
そのため、下記のような指定はできません。


<p id="sec">ブロック1</p>
<p id="sec">ブロック2</p>

ID属性は、CSSの連携以外にも、ページ内リンクに使用できます(アンカーリンク)。
下記のようにaタグのhref属性に、ID名を指定するとID属性で指定した場所まで移動します。


<a href="#sec">ID属性「sec」にリンクします</a>

別のページのID属性にリンクする場合、ページ名の後にID名を記述します。


<a href="index.html#sec">ID属性「sec」にリンクします</a>

Classセレクタ

Class属性で指定した値(名前)をセレクタで指定します。
セレクタで指定する時は、Class名の前に . (ピリオド)を付けます。


<p class="sec">段落</p>


.sec{
  color: #333333;
}

Class属性も、すべてのタグで使用できます。
Class名も、命名ルールで問題にならなければ、自由につけることができます。
特徴として、IDセレクタと違い、ページ単位で、Class名の重複が可能です。
下記のように記述すると特定のpタグだけにCSSを適用できます。


<p class="sec">段落</p>
<p>段落</p>
<p class="sec">段落</p>

他にも、Class属性は、半角スペースで区切ると複数のClass名を指定できます。
下記は「sec」と「block」という値を指定した場合です。


<p class="sec block">段落</p>

ID属性とClass属性の比較

ID属性とClass属性の違いは、下記のようになります。

  ID属性 Class属性
ページ単位での名前の重複 不可
scope="row"サイト内リンクのアンカーに使用 可能 不可
複数名の指定 不可

ID属性とClass属性を組み合わせる

1つのタグに、ID属性とClass属性は同時に指定できます。
また、ID属性とClass属性の値が同じ名前も指定できます。
ただし、同じ名前だと指定が分かりづらくなるので、目的(アンカーリンク、CSSとの紐付け)を明確にして使い分けましょう。

セレクタの使い分けや設計のポイントは、「基礎17. CSSの優先順位とセレクタの関係」で、詳しく解説します。


<!-- IDセレクタとClassセレクタを同時に指定 -->
<div id="sec" class="sec01">セクション</div>

<!-- IDセレクタとClassセレクタの値が同じ -->
<div id="sec" class="sec">セクション</div>

まとめ

  • 要素セレクタは、要素を絞り込む。
  • IDセレクタ、Classセレクタは、名前を付けて対象を絞り込む
  • ID名は、ページ単位で重複できない。
  • Class名は、ページ単位で重複できる。
  • IDセレクタは、ページ内リンクの指定に使える。