CSS :focus not working - css

Question

I tried using :focus CSS pseudo-class in my project. I want to change the color of the element where I click on it. Now when I click my element change color only where it is active and after mouse up it return to old color. After second click I want it back to old color. I'm using Chrome.
Demo here
.row {
display: inline-block;
border: 1px solid grey;
height: 200px;
width: 200px;
line-height: 1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active,
.row:focus {
background: orange;
}
<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>

Answer 1

If you want a real focus state to a div element, you can add a tabindex attribute to it.
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>
If you want toggle the color with clicking the same div element, you have to use javascript (jQuery):
jQuery('#row0').click(function() {
$(this).toggleClass('orange');
});
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row.orange { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>

Answer 2

Following Andy Tschiersch's answer, I would suggest using tabindex = "0" (which is its default value) instead of tabindex = "1".
See: https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex
<div id="main" class="container">
<div class="row" id="row0" tabindex="0" >
</div>
</div>

Answer 3

You can emulate the toggle effect with a CSS trick by adding a hidden checkbox input.
See it here
HTML :
<div id="main" class="container">
<input type="checkbox" />
<div class="row" id="row0">
</div>
</div>
CSS :
.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }

Answer 4

.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; opacity:1 }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>
Please try this...

Answer 5

What you are looking for is :visited, but this doesn't work on a div. You should use the a-tag for it (including href="#").
.row:active, .row:visited { background: orange; }
Check the fiddle below:
http://jsfiddle.net/uuyNH/32/
Edit: Vincent G's answer seems to do more what you want though, since you can remove the background color by clicking away.