quick class & css question

[iluvthsgam]

I have the following code:

<div id="schedule-box">
<div id='schedule-title'><h3>Schedule</h3></div>
<div class='the-week'>This Week</div>
<div class='the-date'>Wednesday December 3</div>
<div class="event-game">
<div class="event-team">11under</div>
<div class="event-time">10:00 AM - 11:00 AM</div>
<div class="event-location"> at <a href="#" target="_blank">Loc</a> 1</div>
</div>
<div class="clearer"></div>

This is in a big FOR loop because it is printing out multiple entries. However, some entries are red, some are blue, and the rest are gray. The class EVENT-GAME will change based on a php variable in my code. That class controls the color of the text for a particular event.

However, I for some reason cannot figure out how to control the color and text-decoration of the A link. Can somebody provide an example of how to control the <a> link in this situation? Thanks!

[swa66]

first off:
an id *has* to be unique on every page, so if you generate them in a loop, take care! Perhaps better to have a class instead.

If I got it right the class name will change depending on the color you want things to render ?

so something like:

.event-game a {
 text-decoration:none;
 color: red;
}
.event-nogame a {
 text-decoration:none;
 color: inherit;
}
.event-training a {
 text-decoration:none;
 color: blue;
}

should do the trick ?

If you want to only affect the a-s in the event-location div, you can add it's class too:

.event-game .event-location a {
 text-decoration:none;
 color: red;
}
.event-nogame .event-location a {
 text-decoration:none;
 color: inherit;
}
.event-training .event-location a {
 text-decoration:none;
 color: blue;
}

BTW: your sample seems to use almost only div tags. There are quite a few others too, and you can style all of them just as well. (over-use of divs can be as bad as tables were in some views - "divitis")

[iluvthsgam]

swa66 - thanks for responding. the top 2 div id's are outside the loop - they are just there so I could show how everything was formatted.

I tried what you suggested and could not get it working. I have tried many different options - but for some reason it is not taking the color for the link - and instead using the colors from the rest of the page.

UPDATE - I was just about to post this and then fixed it. There was a top-level DIV controlling all the 'a' tags under it. Once I removed it - it worked. Thought that the lower level would override but guess not.

[swa66]

specificity is most likely kicking in.

if you have
#id a {color:red} /* specificity 1.0.1 */
and
.class a {color:blue} /* specificity 0.1.1 */

Then the

<div id="id">
  <div class="class">
    <a>I'm red</a>
  </div>
</div>
<div class="class">
  <a>I'm blue</a>
</div>