HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2017/07/11

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

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

idセレクタ

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

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

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

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

classセレクタ

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

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

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

idセレクタとclassセレクタの比較

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

  id属性 class属性
HTML内に同じ名前の指定 -
サイト内リンクのアンカーに使用 -
複数の値の指定 -

idセレクタとclassセレクタを組み合わせる

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

まとめ

  • 要素セレクタは要素を指定できる
  • idセレクタ、classセレクタは名前を付けて指定できる
  • idセレクタはページ内で同じ名前は使えない
  • classセレクタは同じ名前をいくつも指定できる
  • idセレクタはページ内リンクの指定に使える

 - HTML・CSS