<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS: 12 very simple tests for attribute selectors</title>
  <style type="text/css">
    @namespace html url(http://www.w3.org/1999/xhtml);
    @namespace test url(http://www.example.org/);
    *|* { color: red; display: block; margin: 0; padding: 0; }
    head { display: none; }
    testA:not([attr="longvalue"])  { color: green; }
    testB:not([attr^="longvalue"]) { color: green; }
    testC:not([attr$="longvalue"]) { color: green; }
    testD:not([attr*="longvalue"]) { color: green; }
    testE:not([attr~="longvalue"]) { color: green; }
    testF:not([attr|="longvalue"]) { color: green; }
    testa:not([attr="short"])  { color: green; }
    testb:not([attr^="short"]) { color: green; }
    testc:not([attr$="short"]) { color: green; }
    testd:not([attr*="short"]) { color: green; }
    teste:not([attr~="short"]) { color: green; }
    testf:not([attr|="short"]) { color: green; }
  </style>
 </head>
 <body>
  <tests xmlns="http://www.example.org/">
   <testA attr="short">This should be green.</testA>
   <testB attr="short">This should be green.</testB>
   <testC attr="short">This should be green.</testC>
   <testD attr="short">This should be green.</testD>
   <testE attr="short">This should be green.</testE>
   <testF attr="short">This should be green.</testF>
   <testa attr="longvalue">This should be green.</testa>
   <testb attr="longvalue">This should be green.</testb>
   <testc attr="longvalue">This should be green.</testc>
   <testd attr="longvalue">This should be green.</testd>
   <teste attr="longvalue">This should be green.</teste>
   <testf attr="longvalue">This should be green.</testf>
  </tests>
 </body>
</html>
