Change css background for my code - html

Question

I'm not good in css, so please try to help me
I have this css code
#mo-stats-w1 {
background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x;
/*height: 143px;*/
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 10px 0px 0px 0px;
padding-bottom: 10px;
background-color: #3EC4CD;
}
#mo-stats-w2 {
padding: 12px 0px 0px 15px;
}
#mo-stats-w1 ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 1px 0px;
height: 59px;
}
#mo-stats-w1 ul li {
display: block;
list-style: none;
padding: 1px;/*0px 0px 0px 0px;*/
margin: 0px 1px 0px 0px;
width: 174px;
height: 59px;
float: left;
}
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; }
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; }
#mo-stats-w1 ul li strong {
font-size: 24px;
height: 22px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-weight: bold;
color: #1774C2;
text-shadow: 1px 1px 1px white;
display: block;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 11px;
}
#mo-stats-w1 ul li span {
font-size: 13px;
font-weight: bold;
color: #3e3e3e;
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 11px;
}
and this html code
<div id="mo-stats-w1">
<div id="mo-stats-w2">
<ul id="mo-stats-r2">
<li><strong>Status</strong></li>
<li><strong>100</strong> <span>Points</span></li>
<li><strong>30</strong> <span>Pending Points</span></li>
<li><strong>0</strong> <span>Direct Referrals</span></li>
<li><strong>Total</strong></li>
<li><strong>2</strong> <span>Links</span></li>
<li><strong>114</strong> <span>Views</span></li>
<li><strong>7</strong> <span>Unlocked Views</span></li>
</ul>
</div>
</div>
So the layout will be
Change the background for "Status" and "Total" to #4EC772 and background hover #7DD798 and the color for both words to be #FFFFFF
To be something like this
How i can do that please ?
jsfiddle: http://jsfiddle.net/WwY2v/
Thanks

Answer 1

You need to use the nth-child() pseudo class to target those two <li> and do the same for the color: #fff; except specify the <strong> element after ..
Updated fiddle: http://jsfiddle.net/WwY2v/2/
This is what I added:
#mo-stats-r2 li:nth-child(4n + 1):hover {
background: #4EC772;
}
#mo-stats-r2 li:nth-child(4n + 1) strong:hover {
color: white;
}

Answer 2

Simply add a class to the required elements like:
<li class='highlight'><strong>Status</strong></li>
...
...
<li class='highlight'><strong>Total</strong></li>
And use the following css:
.highlight {
color:#FFFFFF; /* normal text color */
background-color:#4EC772; /* normal bg color */
}
.highlight:hover, .highlight:focus {
color:#FFFFFF; /* hover text color */
background-color:#7DD798; /* hover bg color */
}