one confused CSS noob

[nerk01]

This chunk of code isn't being applied:

.resistance ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  color: #DFB801;
}

.resistance ul li {
  list-style-type: none;
  font: 11px verdana, tahoma, sans-serif;
  font-weight: bold;
  text-align: center;
}

.resistance ul li .fire {
    background: url(img/resFire.gif) no-repeat;
    height: 27px;
    width: 27px;
    padding: 2px;
}

.resistance ul li .nature {
    background: url(img/resNature.gif) no-repeat;
    height: 27px;
    width: 27px;
    padding: 2px;
}

.resistance ul li .arcane {
    background: url(img/resArcane.gif) no-repeat;
    height: 27px;
    width: 27px;
    padding: 2px;
}

.resistance ul li .frost {
    background: url(img/resFrost.gif) no-repeat;
    height: 27px;
    width: 27px;
    padding: 2px;
}

.resistance ul li .shadow {
    background: url(img/resShadow.gif) no-repeat;
    height: 27px;
    width: 27px;
    padding: 2px;
}{

to this chunk of code

<div class="resistance">
            <ul>
    		<li class="fire"><span class="<? echo $this->data["res_fire"] == 0 ? "white" : "green"; ?>"><? echo $this->data["res_fire"]; ?></span></li>
                <li class="nature"><span class="<? echo $this->data["res_nature"] == 0 ? "white" : "green"; ?>"><? echo $this->data["res_nature"]; ?></span></li>
                <li class="arcane"><span class="<? echo $this->data["res_arcane"] == 0 ? "white" : "green"; ?>"><? echo $this->data["res_arcane"]; ?></span></li>
                <li class="frost"><span class="<? echo $this->data["res_frost"] == 0 ? "white" : "green"; ?>"><? echo $this->data["res_frost"]; ?></span></li>
    			<li class="shadow"><span class="<? echo $this->data["res_shadow"] == 0 ? "white" : "green"; ?>"><? echo $this->data["res_shadow"]; ?></span></li>
            </ul>
		  </div>

any ideas on whats wrong?

 

[lomn75]

spaces are at fault.

you have "li .class" which would apply to

<li><span class="class">this is styled</span> and this is not</li>
<li class="class">nor is this</li>

you want "li.class" which would apply to

<li class="class">this is styled</li>

There's then a question of if classes are appropriate, since it looks like you're only using one instance of each. In that case, you'd be better off with id="whatever" and styling as

#whatever { ... }