CSS3 defines [att=val]
selectors . And they work in all modern browsers in static form.
But when you will try to use such a selector with attributes changed from script you will get problems.
Following works as expected in FF but does not work in Google Chrome and Opera:
<html> <head> <style> div { display:none; } body[show="n1"] #n1 { display:block; } body[show="n2"] #n2 { display:block; } </style> <script type="text/javascript"> function test() { document.body.setAttribute("show","n2"); } </script> </head> <body show="n1"> <a href="javascript:test()">Test</a> <div id="n1">1</div> <div id="n2">2</div> </body> </html>
I am wondering why Opera and WebKit implementations are failed on this simple test.
As for my [educated] knowledge attribute value selector has the same complexity as e.g. class selector in CSS. No idea to be honest.
I confirm, the same in new google 6.
Best regards,
JoseSilva
Hi! It works on the Opera 10.62
Thank, maxforme. Good to know that Opera team have found resources to fix that.