基礎15. セレクタの種類(要素セレクタ、idセレクタ、classセレクタ)
2017/07/11
要素セレクタ(タイプセレクタ)
要素を直接指定するセレクタです。指定した要素すべてが対象となるためCSSのリセットや初期設定や16章で解説する子セレクタ、子孫セレクタで対象の絞りこみに使用します。
p{
color: #333333;
}
idセレクタ
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セレクタ
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属性 | |
---|---|---|
HTML内に同じ名前の指定 | - | ○ |
サイト内リンクのアンカーに使用 | ○ | - |
複数の値の指定 | - | ○ |
idセレクタとclassセレクタを組み合わせる
idセレクタとclassセレクタは同時に指定できます。またidセレクタとclassセレクタが同じ値でも指定できます。ただし指定が分かりづらくなるので目的(アンカーリンク、CSSとの紐付け)を明確にして使い分けましょう。
<!-- idセレクタとclassセレクタを同時に指定 -->
<div id="sec" class="sec01">セクション</div>
<!-- idセレクタとclassセレクタの値が同じ -->
<div id="sec" class="sec">セクション</div>
まとめ
- 要素セレクタは要素を指定できる
- idセレクタ、classセレクタは名前を付けて指定できる
- idセレクタはページ内で同じ名前は使えない
- classセレクタは同じ名前をいくつも指定できる
- idセレクタはページ内リンクの指定に使える