セレクタ・擬似要素・疑似クラス・ルール

メモ

  • 大文字・小文字の区別なし
  • セレクタを複数要素に適用する場合、カンマ(,)区切り (例:h1, h2 { color: blue; })
  • 要素については、HTML5 リファレンス メモ 参照

一覧

セレクタ説明
汎用セレクタ *
ns|*
*|*
|*
全ての要素
タイプセレクタ E
ns|E
*|E
|E
全てのE要素
クラス セレクタE.classnameクラスにclassnameを指定したE要素
ID セレクタE#idnameid属性がidnameのE要素
属性セレクタ (存在) E[attr]attr属性を持つ全てのE要素
属性セレクタ (完全一致) E[attr="value"] attr属性値がvalueであるE要素
属性セレクタ (先頭一致) E[attr^="value"]   attr属性値がvalueで始まるE要素
属性セレクタ (末尾一致) E[attr$="value"]   attr属性値がvalueで終わるE要素
属性セレクタ (部分一致) E[attr*="value"]   attr属性値がvalueを含むE要素
属性セレクタ (リスト項目一致) E[attr~="value"] attr属性値の1つがvalueであるE要素
属性セレクタ (プリフィックス) E[attr|="value"] ハイフンで区切られたattr属性がvalueで始まるE要素
子孫 結合子E FE要素の子孫のF要素
子 結合子E > FE要素の子のF要素
隣接兄弟 結合子E + FE要素の直後の兄弟F要素
一般兄弟 結合子E ~ F E要素の後の兄弟F要素
擬似要素説明
コンテンツ直後 E::after
E:after
E要素のコンテンツの直後
コンテンツ直前 E::before
E:before
E要素のコンテンツの直前
先頭文字 E::first-letter
E:first-letter
E要素の内容の先頭文字
先頭行 E::first-line
E:first-line
E要素の内容の先頭行
ユーザ選択部分 E::selection
E::-moz-selection
ユーザがマウス等で選択したE要素部分
疑似クラス説明
アクティブ要素E:activeアクティブなE要素
チェック要素E:checked チェックされているE要素 (ラジオボタン・チェックボックス等)
使用不可要素E:disabled 使用不可状態のE要素
空要素E:empty 空のE要素
使用可能要素E:enabled使用可能状態のE要素
印刷先頭ページE:first印刷時の先頭のページ
先頭子要素E:first-child親要素の先頭子E要素
先頭該当子要素 E:first-of-type 親要素の先頭該当子E要素
フォーカス要素E:focusフォーカスがあるE要素
ホバー要素E:hoverポインティングデバイスが乗っているE要素
不確定要素E::indeterminate 不確定状態のE要素 (チェックボックス等)
言語要素E:lang(fr)言語がfrのE要素
最終子要素E:last-child 親要素の最終子E要素
最終該当子要素 E:last-of-type親要素の最終該当子E要素
印刷左ページE:left印刷時の左側のページ
未訪問リンク要素E:link未訪問リンクのE要素
否定要素E:not(s) sセレクタ以外のE要素
an+b番目の子要素E:nth-child(an+b) 親要素のan+b番目の子E要素
b(単一要素:1~)・an-b・odd(奇数)・even(偶数) の指定も可
末尾からan+b番目の子要素 E:nth-last-child(an+b) 親要素の末尾からan+b番目の子E要素
末尾からn番目の該当子要素 E:nth-last-of-type(n) 親要素の末尾からn番目の該当子E要素
an+b番目の該当子要素 E:nth-of-type(an+b) 親要素のan+b番目の該当子E要素
唯一の子要素E:only-child 親要素の唯一の子E要素
唯一の該当子要素E:only-of-type 親要素の唯一の該当子E要素
入力任意要素E:optional 入力必須(required属性)以外のE要素
入力必須要素E:required 入力必須(required属性)のE要素
印刷右ページE:right印刷時の右側のページ
文書のルート要素E:root 文書のルートE要素
リンク先要素E:target リンク先のE要素
訪問済みリンク要素E:visited訪問済みリンクのE要素
ルール説明
!important重要 (優先)
@charset文字コード
@counter-styleリストスタイルカスタマイズ
@font-faceWeb フォント
@font-feature-values代替字形
@import外部スタイルシートのインポート
@keyframesアニメーションのキーフレーム
@mediaメディアタイプ
@namespace名前空間
@page印刷ページ
@supportsサポート判定

関連