| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| background-color: rgb(255, 255, 255); |
| color: #444; |
| font-size: 40px; |
| } |
| |
| #title { |
| font-size: 60px; |
| } |
| |
| .white { |
| color: #fff; |
| } |
| |
| markup { |
| color: #444; |
| font-size: 40px; |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| SELECTORS = [ |
| 'div', |
| 'div', |
| 'div+div', |
| '.foo', |
| 'div.foo', |
| '.foo, #another-id', |
| 'div+div.foo', |
| '.foo.foo', |
| '.foo.bar', |
| '#title', |
| 'div#title', |
| 'div.foo#title, div' |
| ]; |
| COLORS = [ |
| "#0048ab", |
| "#5E00af", |
| "#f10026", |
| "#ff9F00", |
| "#fff400", |
| "#3bdb00", |
| ]; |
| |
| function addRule(selector, color) { |
| var rule = selector + ' { color: ' + color + ' }'; |
| var styleSheet = document.styleSheets.item(0); |
| styleSheet.insertRule(rule, styleSheet.cssRules.length); |
| |
| var p = document.createElement('p'); |
| p.appendChild(document.createTextNode(selector + ' { color: ')); |
| var span = document.createElement('span'); |
| span.textContent = color; |
| span.style.color = color; |
| p.appendChild(span); |
| p.appendChild(document.createTextNode(' }')); |
| document.body.appendChild(p); |
| } |
| |
| function keyDownArrow() { |
| if (currentSelector + 1 < SELECTORS.length) { |
| currentSelector++; |
| addRule(SELECTORS[currentSelector], |
| COLORS[currentSelector % COLORS.length]); |
| } |
| } |
| |
| var currentSelector = 0; |
| document.addEventListener('load', function() { |
| currentSelector = -1; |
| }); |
| |
| document.addEventListener('keydown', function(event) { |
| if (event.keyCode == 40) { // Down arrow |
| keyDownArrow(); |
| } |
| }); |
| </script> |
| </head> |
| |
| <body> |
| |
| <div> |
| <markup><div></markup><markup></div></markup> |
| </div> |
| |
| <div id="title" class="foo bar"> |
| <markup><div id="title" class="foo bar"></markup> |
| Hello, Cobalt! |
| <markup></div></markup> |
| </div> |
| |
| <p class="white">|</p> |
| <p>__________________________________________________________</p> |
| <p class="white">|</p> |
| |
| </body> |
| </html> |
