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

要素セレクタ（タイプセレクタ）

要素を直接指定するセレクタです。指定した要素すべてが対象となるためCSSのリセットや初期設定や16章で解説する子セレクタ、子孫セレクタで対象の絞りこみに使用します。


p{
  color: #333333;
}

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


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


#sec{
	color: #333333;
}

ID属性は、すべての要素で使用できます。名前は命名ルールに違反していなければ自由につけることができます。1枚のWEBページ内で同じID名は1度しか使えません。ただしページが違えば使用できます。
下記のような指定はできません。


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

ID属性はページ内でのリンクに使用できます（アンカーリンク）下記のようにaタグのhref属性の値にID名を記述するとID属性で指定した場所までジャンプします。


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

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


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

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


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


.sec{
  color: #333333;
}

Class属性は、すべての要素で使用できます。Class名は、命名ルールに違反していなければ自由につけることができます。HTML内で同じClass名を何度も使用できます。下記のように記述すると特定のp要素だけCSSを適用できます。


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

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


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

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

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


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

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