通常版 → カンマ区切りセレクタ版
CSS Syntax | Selector Name | Level | Valid case | Invalid case |
---|---|---|---|---|
E1 E2 | Descendant combinator | 1 | Green ? |
Red ? |
E1 > E2 | Child combinator | 2 | Green ? |
Red ? |
E1 + E2 | Adjacent combinator | 2 | Green ? |
Red ? |
E1 ~ E2 | General sibling combinator | 3 | Green ? |
Red ? |
E[attr="value"] | Attribute Selector | 2 | Green ? |
Red ? |
E[attr^="value"] | Attribute Selector | 3 | Green ? |
Red ? |
E[attr$="value"] | Attribute Selector | 3 | Green ? |
Red ? |
E:first-child | Structural pseudo-classes | 2 | Green ? |
Red ? |
E:last-child | Structural pseudo-classes | 3 | Green ? |
Red ? |
E:nth-child(n) | Structural pseudo-classes | 3 | Green ? |
Red ? |
E:only-child | Structural pseudo-classes | 3 | Green ? |
Red ? |
E:empty | Structural pseudo-classes | 3 | Red ? |
|
E:lang(ja) | :lang() pseudo-class | 2 | Green ? |
Red ? |
E::before | ::before pseudo-element | 2 | Red ? |
|
E::after | ::after pseudo-element | 2 | Red ? |
|
E:not(s) | Negation pseudo-class | 3 | Green ? |
Red ? |
閲覧中の Web ブラウザにおける、CSS セレクタやプロパティの対応度を簡易的にチェックします。Valid case にはテスト用に埋め込んである CSS にマッチすべきケース、Invalid case にはマッチすべきでないケースがそれぞれ埋め込まれています。テスト用 CSS にマッチするとセルの背景色が緑に、マッチしないと何も表示されないか背景色が赤く表示されます。
要するにValid case の背景色が緑に、Invalid case の背景色が赤くなっていれば、当該 CSS セレクタもしくはプロパティを閲覧中のブラウザが実装済みであることを示しています。
2006-02-02, Yoichiro AKIYAMA
(Institute for Research in Humanities, Kyoto University)