CSSのセレクタ式

参考

セレクタ式を用いてJSからDOMを取得する方法

• document.querySelector({セレクタ式})
• document.querySelectorAll({セレクタ式})

セレクタ式

基本

シンボル	取得するDOM
*	すべてのDOM要素
#{id}	指定idをもつDOM要素
.{class}	指定classをもつDOM要素
{tag}	指定tagをもつDOM要素

階層

シンボル	取得するDOM
{parent} > {child}	要素parentの子要素child
{ancestor} {descendant}	要素ancestorの子孫要素descendant
{prev} + {next}	要素prev直後の要素next
{prev} ~ {siblings}	要素prev以降の兄弟要素siblings

フィルタ

要素フィルタ

シンボル	取得するDOM	例
: root	ドキュメントルート	:root
: not({elem})	要素elemにマッチしない要素	div: not(.sub)
: lang({lang})	指定した言語をもつ全ての要素	: lang(ja)
: empty	子要素をもたいない要素	div: empty

属性フィルタ

| シンボル | 取得してするDOM | 例 | | [{attr}] | 指定した属性attrを持つ要素 | input [type] | | [{attr}={value}] | 属性attrがvalueに等しい要素 | input [type="button"] | | [{attr}^={value}] | 属性attrがvalueから始まる要素 | a [href="https://"] | | [{attr}$={value}] | 属性attrの末尾がvalueで終わる要素 | img [src$=".gif"] | | [{attr}={value}] | 属性attrがvalueを含む要素 | div [title="tiny-tank"] | | [selector1][selector2][selector3] | すべてのセレクタフィルタにマッチする要素 | img [src][alt] |

子要素フィルタ

シンボル	取得するDOM	例
: nth-child({index}	odd	even)
: nth-last-child({index}	odd	even)
: first-child	一番目の子要素	div: first-child
: last-child	末尾の子要素	div: last-child
: only-child	子要素を一つだけ持つ要素	p: only-child

兄弟要素フィルタ

シンボル	取得するDOM	例
: nth-of-type({index}	odd	even)
: first-of-type	同じ階層の最初の要素	div: first-of-type
: last-of-type	同じ階層の末尾の要素	div: last-of-type
: only-of-type	他に兄弟のいない要素	p: only-of-type

フォーム要素に対する状態フィルタ

シンボル	取得するDOM	例
: enabled	有効な状態にある要素	: enabled
: disabled	無効な状態にある要素	: disabled
: checked	チェック状態の要素	: checked
: focus	フォーカスが当たっている要素	: focus