title: How to change a div's outline color when selected?
body: <p>I need to change the outline color when the div is selected. I have tried by using the same technique as hover (shown below), but I need help with a selector. Is it possible via JavaScript or is CSS enough?</p>
  
  <p>Here is what I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      background: #ccc;
      margin: 20px;
  }
  div:hover {
      outline: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>