How to style object when the user clicks it - html

Question

In css for the links I can style the as before user clicks and after user clicks. But how can I do this for simple text or an object that when a user clicks that object then change its color.
For Example
<style>
.object:onmouseclick {
background-color:green;
padding:5px;
}
</style>
What we have to write in place of onmouseclick.

Answer 1

If you were styling a link you would use :active or :focus but as you're using this on a dom element, you would have to use jQuery to add a class to the clicked item and apply the style through that class...
$('.object').click(function() {
$(this).toggleClass('clicked');
});
.object {
background-color: green;
padding: 5px;
cursor: pointer;
width: 300px;
color: orange;
}
.object.clicked {
background-color: blue;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
<h1>The Mutants Are Revolting</h1>
<p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>
</div>

Answer 2

button:active or button:focus should do the trick.
a {
background-color: red;
}
a:active {
background-color: #efefef;
}
myButton

Answer 3

and optionally
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.object{
background:green;
padding:5px;
width: 300px;
height: 300px;
position: relative;
}
input{
display: none;
}
label{
display: block;
width: 300px;
height: 300px;
}
input:checked ~ label{
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: #00f url(http://www.pubzi.com/f/sm-chess-horse.png) no-repeat center center;
border: 1px solid #000;
}
<div class="object">
<input type="checkbox" id="c1" name="checkbox" />
<label for="c1"></label>
</div>