CSS: セレクタの一覧

CSSでスタイルの適用対象のことをセレクタといいます。 下の図では一番左側の「div」がセレクタです。

基本書式

CSSではさまざまなセレクタが定義されていて、用途に応じて使い分けることができます。 このページではCSSで定義されている主なセレクタの一覧を紹介します。 赤字のセレクタは使用頻度の高いセレクタです。

セレクタ名書式説明
タイプセレクタ要素名指定した要素
ユニバーサルセレクタ*(アスタリスク)すべての要素
IDセレクタ要素名#id名ID名が指定されている要素
クラスセレクタ要素名.クラス名クラス名が指定されている要素
グループセレクタ要素名,要素名カンマ区切りで指定されたすべての要素
子孫セレクタ要素名 要素名親要素に含まれる子孫要素
子セレクタ要素名 > 要素名親要素の直接の子要素
隣接セレクタ要素1 + 要素2兄弟要素のうち、要素1の直後にある要素2
間接セレクタ要素名 ~ 要素名兄弟要素のうち、要素1の後(直後でなくてもよい)にある要素2
属性セレクタ要素名[属性名]指定した属性を持つ要素
要素名[属性名="値"]指定した属性と値を持つ要素
要素名[属性名~="値"]空白区切りの属性値の中で、指定した値を含む要素
要素名[属性名|="値"]ハイフン区切りの属性値の中で、指定した値で始まる要素
要素名[属性名^="値"]属性値が、指定した値で始まる要素
要素名[属性名$="値"]属性値が、指定した値で終わる要素
要素名[属性名*="値"]属性値に、指定した値を含む要素
疑似クラス要素名:link未訪問のページへのリンク
要素名:visited訪問済みのページへのリンク
要素名:hoverマウスカーソルが重なっている時
要素名:active要素を選択した時
要素名:focusフォーカスがある時
要素名:target移動先の要素
要素名:lang()lang属性値が指定された言語コードで始まっている要素
要素名:enabled有効な要素
要素名:disabled無効な要素
要素名:checkedラジオボタンやチェックボックスが選択状態のとき
要素名:indeterminateラジオボタンやチェックボックスが不確定状態のとき
要素名:rootルート要素
要素名:first-child最初の子要素
要素名:last-child最後の子要素
要素名:nth-child()n番目の子要素
要素名:nth-last-child()最後からn番目の子要素
要素名:only-child唯一の子要素
要素名:first-of-type最初の子要素
要素名:last-of-type最後の子要素
要素名:nth-of-type()n番目の子要素
要素名:nth-last-of-type()最後からn番目の子要素
要素名:only-of-type唯一の子要素
要素名:empty要素内容や子要素を持たない要素
要素名:not()指定条件と一致しない要素
疑似要素要素名::first-line最初の1行
要素名::first-letter最初の1文字
要素名::before要素の直前
要素名::after要素の直後
HTML・CSS入門