Attribute Selectors with a match

The is a test page for Attribute selectors. If there is a green line below then this browser supports Attribute selectors.

Not Supported

Filter

Match

Note: This test page is still incomplete and under review and testing.

Attribute presence and values selectors CSS2

p.test0[class]

p.test1[class="test1"]

p.test4[class="test4 x"] <p class="test4 x">

p.test6-x[class="test6-x"] <p class="test6-x">

p.test20[class~="test20"] <p class="test20 x">

p.test22-x[class~="test22-x"] <p class="test22-x y">

p.test30-x[class|="test30"] <p class="test30-x">

p.test31-x[class|="test31-x"] <p class="test31-x"> - filter Opera 9.24

p.test33[class|="test33 x"] <p class="test33 x-y">

p.test34[class|="test34 x-y"] <p class="test34 x-y"> - filter Opera 9.24

p.test35[class|="test35 x-y"] <p class="test35 x-y-z"> - filter Opera 9.24

p.test36-x-y[class|="test36-x"] <p class="test36-x-y"> - filter Opera 9.24

p.-test38[class|=""] <p class="-test38">

div.test40 [class|=""] <div class="-test40"><p class="">

Support of Selectors
SelectorGecko 1.7~1.9Opera 9.2Opera 9.5bSafari 3.1bIE 7~8biCabKonqueror
6.3.1. Attribute presence and values selectors OKBOKOKOK??

Substring matching attribute selectors CSS3

p.test50[class^="tes"]

p.test51[class^="test51"]

p.test52[class^="test51"]

p.test60[class$="st60"]

p.test61[class$="test61"]

p.test70[class*="test70"]

p.test71[class*="test"]

p.test75-x[class*="-"] <p class="test75-x">

p.test77[class*=" "] <p class="test77 x-y-z">

p.test78[class*="-"] <p class="test78 x-y-z">

Support of Selectors
SelectorGecko 1.7~1.9Opera 7.5~8.5Opera 9.0~9.5bSafari 3.1bIE 7~8biCabKonqueror
6.3.2. Substring matching attribute selectorsOKNOKOKOK??

Other test with Selectors

References and other links

  1. CSS selectors: basic browser support
  2. CSS3 Selectors Test Suite Index