カテゴリー
HTML/CSS

セレクタ

CSS リファレンス

セレクター

セレクタの種類と組み合わせのルール

先頭には必ず

タイプセレクタ(要素名)またはユニバーサルセレクタ(*)

のどちらかを配置する。

それ以降には、

  • クラスセレクタ(.xxx)
  • IDセレクタ(#xxx)
  • 属性セレクタ([xxx])
  • 疑似クラス(:xxx)

順不同で必要なだけ記述できる。

その差異、ユニバーサルセレクタ(*)のあとに他のシンプルセレクタが続く限り、ユニバーサルセレクタを省略することができる。

タイプセレクタ

h1 { color: #333; }

ユニバーサルセレクタ

* { color: #333; }

クラスセレクタ

p.subtitle { color: #333; }

IDセレクタ

ul#footnav { color: #333; }

属性セレクタ

特定の属性が指定されている要素、または特定の属性に特定の値が指定されている用をと対象として指定する。

7種類の属性セレクタ

  • [属性名]
  • [属性名="属性値"]
  • [属性名~="属性値"]
  • [属性名|="属性値"]
  • [属性名^="属性値"]
  • [属性名$="属性値"]
  • [属性名*="属性値"]
img[src$=".jpg"] { border: 3px solid #f00; }

リンク関連の疑似クラス

ある要素が特定の状態にあるときなどに限定して適用対象にする。

CSS 擬似クラス

使用頻度の高いリンク関連の擬似クラス

:link { color: blue; }
:visited { color: purple; }
:hover { color: red; }
:active { color: yellow; }

その他の疑似クラス

疑似要素

CSS 疑似要素

結合子

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

コメントを残す

メールアドレスが公開されることはありません。