How to change a div's outline color when selected?

Question

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?

Here is what I tried:

div {      background: #ccc;      margin: 20px;  }  div:hover {      outline: 1px solid blue;  }

<div>1</div>  <div>2</div>  <div>3</div>

Answer 1

You can try :focus pseudo-class. Note you will need tabindex to make your divs focusable.

div {      background: #ccc;      margin: 20px;  }  div:focus {      outline: 1px solid blue;  }

<div tabindex="-1">1</div>  <div tabindex="-1">2</div>  <div tabindex="-1">3</div>