<!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>&lt;div&gt;</markup><markup>&lt;/div&gt;</markup>
  </div>

  <div id="title" class="foo bar">
  <markup>&lt;div id="title" class="foo bar"&gt;</markup>
    Hello, Cobalt!
  <markup>&lt;/div&gt;</markup>
  </div>

  <p class="white">|</p>
  <p>__________________________________________________________</p>
  <p class="white">|</p>

</body>
</html>