html - Change css background for my code -


i'm not in css, please try me

i have 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 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 layout be

enter image description here

change background "status" , "total" #4ec772 , background hover #7dd798 , color both words #ffffff

to this

enter image description here

how can please ?

jsfiddle: http://jsfiddle.net/wwy2v/

thanks

you need use nth-child() pseudo class target 2 <li> , same color: #fff; except specify <strong> element after ..

updated fiddle: http://jsfiddle.net/wwy2v/2/

this added:

#mo-stats-r2 li:nth-child(4n + 1):hover {    background: #4ec772; }  #mo-stats-r2 li:nth-child(4n + 1) strong:hover {    color: white; } 

Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -