KIng wins, Ace wins.

by Aaron Kahlhamer

HTML

<div id="king1" class="queen">
    <h2>King wins.</h2>
</div>

<div id="king2" class="queen ace">
    Ace wins.
</div>

<div id="king3" class="queen" style="color:purple">
    Joker wins!
</div>

<div id="king4" class="queen ace" style="color:purple!important">
    Joker wins again!
</div>

CSS

* {
    font-size:2em;
}

#king1, #king2, #king3, #king4 {
    color:maroon;
}

.queen h2 {
    color:green;
}

.ace {
    color:black!important;
}

.thequeenssister {
    color:orange!important;
}

JavaScript

$('div').on('click', function() {
   $(this).addClass('thequeenssister'); 
});