[thelist] CSS Problem

James Hardy evolt at weeb.biz
Wed Dec 8 11:31:24 CST 2004


Sarah Sweeney wrote:
>> I've got a CSS problem I can't figure out, and I'm having a hard time
>> finding anything on google or CSS reference, because I can't find an 
>> example
>> for what I need to do. What I want is the class "sidetitle" to a 
>> different
>> color in two separate divs that share the same class. Below is the 
>> code. In
>> the div with the class "links1", I want all the sidetitle classes to be
>> white. In div with class "links2", I want all the sidetitle classes to be
>> blue.
>>
>> <div id="links1">
>>     <div class="sidetitle">Archives</div>
>>     <div class="side">
>>         December 2004<br />
>>         November 2004
>>     </div>
>> </div>
>>
>> ~~~~~~~~~~~~~~~~~~
>>
>> <div id="links2">
>>     <div class="sidetitle">Categories</div>
>>     <div class="side">
>>         Books<br>
>>         Funny Stuff<br>
>>         Pets<br>
>>     </div>
>> </div>
> 
> 
> Try this:
> 
> div#links1 div.sidetitle { color: white; }
> div#links2 div.sidetitle { color: blue; }
> 
Given that what you are trying to do is produce headings followed by 
lists of stuff, rather than using a classes, you might want to rewrite 
it to be a little more semantic so it would be:

<div id="links1">
     <h3>Archives</h3>
     <ul>
         <li>December 2004</li>
         <li>November 2004</li>
     </ul>
</div>

~~~~~~~~~~~~~~~~~~

<div id="links2">
     <h3 class="sidetitle">Categories</h3>
     <ul>
         <li>Books</li>
         <li>Funny Stuff</li>
         <li>Pets</li>
     </ul>
</div>

~~~~~~~~~~~~~~~~~~

div#links1 h3 { color: white; }
div#links2 h3 { color: blue; }

/*and then to get rid of the bullet points*/
div#links1 ul, div#links2 ul { list-item-style: none; }

You would probably also need to play around with the paddings and 
margins to get it looking just right, but it has the advantage that the 
markup would actually mean something.

-- 
James


More information about the thelist mailing list