10 replies to this topic

[arlen]

I'm feeling dumb as a rock right now. I'm still struggling with CSS inheritance - Why can't I get <a> elements of a class to "cascade" ?

If I define a class, which includes background color, font colors, text-decoration & link attributes, I can't get the link conditions to cascade when the class is assigned to a <table> or <tr> or <td> tag. Background and font size work, color for standard text works, but none of the link attributes do.

It works fine when I assign the class directly to the <a> tag so I'm pretty sure I have the syntax right.

I'm sure it's not necessary for every <a> tag w/in a table to need a class specifically called out, what the heck am I doing wrong?

[qwerty]

I'm sure it's not necessary for every <a> tag w/in a table to need a class specifically called out, what the heck am I doing wrong?

Actually, I think you do. Now, if you set an ID for the table, and set all the pseudoclasses for links within that ID a certain way, I think you could just use <a> for links inside the table that holds that ID.


...I think.

[Ron Carnell]

CODE

.classname {
    color: #000;
    font-size: 80%;
}
.classname a {
    color: #369;
}

It really shouldn't be any more difficult than that ...

[arlen]

Ok then ... you're right, that works, thanks Ron.

But why does this syntax as I've seen it described in almost every tutorial I've read, NOT cascade in a table (though works in an <a> or <span>):

CODE

.txt {
font-family: "Veranda", Arial, Helvetica, sans-serif;
color: #00EE00;
}
a.txt:link {
color: #00EE00;
}
a.txt:visited {
color: #00EE00;
}
a.txt:hover {
color: #EE0000;
text-decoration: underline;
}

And this syntax does cascade?

CODE

.txt {
font-family: "Veranda", Arial, Helvetica, sans-serif;
color: #00EE00;
}
.txt a {
color: #00EE00;
}
.txt a:hover {
color: #EE0000;
text-decoration: underline;
}

Edited by arlen, 05 February 2005 - 09:12 PM.

[leadegroot]

Your first sample will work when applied to HTML with this structure:

CODE

<div><a class="txt" ...></a></div>

Your second sample will apply to markup like this:

CODE

<div class="txt"><a ...></a></div>

See the difference?


warmly,
Lea

[Ron Carnell]

a.txt means any A element assigned a class of txt

.txt a means any A element found inside anything assigned a class of txt

[arlen]

Thanks ... really appreciate the clarification. I wasted hours tonight.

[Ron Carnell]

Been there, done that. Still, I doubt it was a waste.

I'll bet dollars to donuts it's not something you'll ever forget.

[qwerty]

Well, I certainly appreciate you posting the question, arlen. I got to learn something

Just for clarification, if my css includes table.txt rather than just .txt, can I still define .txt a, or would that not work?

Edited by qwerty, 06 February 2005 - 08:42 AM.

[Ron Carnell]

I'm honestly not sure if it work or not, Bob, just because I've never tried it. If I define table.txt that means I only want the style to apply to tables, maybe because I'm also going to define div.txt as something entirely different.

That being the case, I would use table.txt a to define my links, if only to be consistent. Whether it would "work" without the element specifier or not, I'm not sure.

<added>Okay, a quick test confirms that .txt a works for both table.txt and div.txt </added>

CODE

table.txt { color: #800; }

div.txt { color: #080; }

.txt a { color: #369; }

Using the styles above, content text comes out red in a table, green in a div, with links in both the table and div a nice light azure. I can see some real uses for that in cutting down the amount of code needed in many situations.

[maleman]

Just for clarification, if my css includes table.txt rather than just .txt, can I still define .txt a, or would that not work?

Yes, it would work.

.txt is the class. Using "table.txt" you're assigning the class "txt" to "table". By using ".txt a", you're assigning the properties of "a" to class "txt"

<style>
<!--

table.txt {color: #000000 }

.txt a:link { color: #FF0000; text-decoration: none }
.txt a:visited { color: #00FF00; text-decoration: none }
.txt a:active { color: #0000FF; text-decoration: none }
.txt a:hover { color: #0000FF; text-decoration: none }

-->
</style>

I find it easier to by only defining classes as in the following unless aboslutely necessary to use something else:

.txt { color: #000000} and avoiding table.txt { color: #000000}

Keep it simple but don't over-simplify!

Edited by maleman, 08 February 2005 - 10:17 PM.