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

2016/04/17 2017/07/11 hatano

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

要素を直接指定するセレクタです。指定した要素すべてが対象となるため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>