CSS3 Tests: Pseudo Classes

Tests of new Pseudo classes in CSS3.

Overview

CSS3 adds tons of new pseudo classes. These are very useful and inventive. But it will be a long time before they can be used in practice. These are tests of the contains, selection, enabled/disabled, value, and nth-child pseudo classes. For information on what these do please see the W3C CSS3 Module. All tests use one colon (:) for pseudo-classes.

Contains

If the below text is red, your browser supports :contains.
This is test text.

Form Selectors

:enabled/:disabled and :value
All forms fields except the disabled one should have italicized font since I have input:not([DISABLED]) in the testsheet.
The below should be purple if your browser supports :value.
Don't use the last the latter. It's easier to select elements with the a certain value with the attribute selectors. No browser I tested (Moz, IE) supports it anyway.

Selection

Next a test for selection.
Select some of the text in this box. If the text turns red your browser supports :selection.

nth-child

This pseudo class could be used to stripe tables. In this the below table should be striped black and white. If it is your browser supports nth-child.
 
 
 
 
 

nth-of-type

Below there are two green images. The first one should have a black border, the second should have a grey border. If they do your browser supports nth-of-type.
Black border
 
Grey border

Results

Safari 1.2 and Mozilla support :not, Safari 1.2 supports :selection.