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 | 要素の直後 |