フィルタというのはセレクタの一種なのだが、「:」で始まる名前を持つのが特徴で他のセレクタと組み合わせて使う。他のセレクタで選択した要素をフィルタでさらに絞り込むといったイメージ。
基本的なフィルタ
- 否定
- :not(セレクタ) … セレクタで選択されない要素を選択。
- 索引番号で指定
- :eq(n) … 0から数えてn番目の要素を選択。
- :lt(n) … 0から数えてn番目より小さい順序の要素を選択。
- :gt(n) … 0から数えてn番目より大きい順序の要素を選択。
- 特殊な索引番号
- :first … 最初の要素を選択。
:eq(0) と記述するのと同じ。
- :last … 最後の要素を選択。
- :even … 0から数えて偶数番目の要素を選択。
- :odd … 0から数えて奇数番目の要素を選択。
- 状態
- :animated … 選択したタイミングでアニメーションしている要素を選択。
- :focus … 選択したタイミングでフォーカスが当たっている要素を選択。
- 特殊な要素
- :header … ヘッダ要素（h1、h2、h3…）を選択。
- :lang(言語) … lang属性に「言語」が指定されている要素を選択。
- :root … 一番親の要素を選択。HTMLの場合は必ず
<html> が選択される。
- :target … URIの#以降で指定された名前をid属性に持つ要素を選択。
子要素フィルタ
- :first-child … 同階層にある要素のうち最初の要素を選択。
- :first-of-type … 同階層にある同名の要素のうち最初の要素を選択。
- :last-child … 同階層にある要素のうち最後の要素を選択。
- :last-of-type … 同階層にある同名の要素のうち最後の要素を選択。
- :nth-child(n) … 同階層にある要素のうちn番目の要素を選択。
- :nth-last-child(n) … 同階層にある要素のうち最後からn番目の要素を選択。
- :nth-last-of-type(n) … 同階層にある同名の要素のうち最後からn番目の要素を選択。
- :nth-of-type(n) … 同階層にある同名の要素のうちn番目の要素を選択。
- :only-child … 同階層に他の要素が無い要素を選択。
- :only-of-type … 同階層に他の同名の要素が無い要素を選択。
内容フィルタ
- :contains(文字列) … 指定した文字列を内容に含む全ての要素を選択。（大文字・小文字を区別する）
- :has(セレクタ) … 指定したセレクタにマッチする要素を1つ以上内容に持つ要素を選択。
- :empty … テキストノードも含めいかなる子要素も持たない要素を選択。:parentの逆。
- :parent … テキストノードまたは子要素を1つ以上持つ要素を選択。:emptyの逆。
可視性フィルタ
- :hidden … 見えない要素をすべて選択。
display: none である要素や type="hidden" であるinput要素、幅・高さに0が指定された要素など。
- :visible … 見える要素をすべて選択。
visibility: hidden や opacity: 0 は見える要素と判断される。
フォームフィルタ
- オブジェクト
- :button
- :checkbox
- :file
- :image
- :input
- :password
- :radio
- :reset
- :submit
- :text
- 状態
- :checked
- :disabled
- :enabled
- :focus
- :selected