Re: multiple uses of a class in a single CSS file

Heather Gray wrote:

> Hello,
>
> Sorry if this has been addressed long ago...I searched the mailing list archives
> and couldn't find anything relevant!
>
> I have a bit of CSS I'd like to share with you. It was written by someone else.
> It appears in a single CSS file.
>
> .announce {
>               background: #CCCCCC;
> }
>
> A.announce {
>                 font-size: 90%;
>                 font-family: arial, helvetica;
>                 color: #003366;
>                 text-decoration: underline;
> }
>
> div.announce{
>                 text-align: center;
>                 background: #CCCCCC;
> }
>
> TR.announce {
>                 padding: 20px;
> }
>
> The person who wrote this argues that each of these elements, such as div,
> should "inherit" the gray background specified in .announce and add the other
> elements (don't ask me why she also added the gray background, then). From
> what I understand of inheritance, her interpretation is not inheritance at all.

No, it is not inheritance, it is the cascade.

The first rule, which specifies only the class, matches all elements that have been
assigned that class. This rule will assign the background color to <a
class="announce>, <div class="announce"> <tr class="announce"> as well as <p
class="announce">.

The following three rules match only elements of the specified type and class. (The
background property in the div.announce rule is redundant.)


> Please let me know if this use of class is wrong and why.

Nothing wrong with it, this is what it was designed to do.

> I am having a hard
> time coming up with documentation that specifies why this is wrong and why it
> shouldn't necessarily work the way she thinks it will.

It works just like she thinks it will, just for different reasons.

> I have tried to explain
> that the "a," the "div," and the "tr" should have separate IDs each:
>
> <div class="announce" id="otherthing">Hey everyone!</div>
> <tr class="announce" id="fatcells"><td>Hi again!</td></tr>
> <a class="announce" id="speciallink" href="file.html">Follow this link</a>

Absolutely no need for the IDs in this example. It may help you to think of the
class as a "purpose", i.e. what role are the <div>, <tr> and <a> elements playing in
the document as opposed to other <div>s, <tr>s and <a>s?

It may also help to realize that:
.announce { background: ...; }

is equivalent to:
*.announce { background: ...; }
i.e. all elements with this class.

>
>
> But that doesn't explain why this same-class scheme DOESN'T work.
> Or maybe I don't understand CSS and it should work the way she says.
>
> Thanks,
> Heather