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

HTML・CSS

この記事をシェアする：

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

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


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

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名の前に . （ピリオド）を付けます。


<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属性の違いは、下記のようになります。

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

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


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

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