CSS Test

CSS Selector Tests

通常版カンマ区切りセレクタ版

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 ?

Instructions

閲覧中の Web ブラウザにおける、CSS セレクタやプロパティの対応度を簡易的にチェックします。Valid case にはテスト用に埋め込んである CSS にマッチすべきケース、Invalid case にはマッチすべきでないケースがそれぞれ埋め込まれています。テスト用 CSS にマッチするとセルの背景色が緑に、マッチしないと何も表示されないか背景色が赤く表示されます。

要するにValid case の背景色が緑に、Invalid case の背景色が赤くなっていれば、当該 CSS セレクタもしくはプロパティを閲覧中のブラウザが実装済みであることを示しています。

If your browser supports each of the folowing CSS selectors or properties, "valid cases" background color must be appear green. (So as "invalid cases" shuold appear red.) Feedbacks about this test are always welcome !

2006-02-02, Yoichiro AKIYAMA
(Institute for Research in Humanities, Kyoto University)