Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: not2easy

Message Too Old, No Replies

CSS class and cascade

     
12:13 am on Mar 6, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


I'm really not sure how or if this can be done!
(keep in mind I'm new at this!)

Lets say I have a class for table like this:

table.content{
color: #39c
background-color: #ccc;
}

now what I want to do is to specify td style (background color) for that specific table.content without having to specify a new class for those td.

right now i have it set up like this:
td.content{
color: #39c;
background-color: #eee;
}

the result is I have to specify the class="content" for evrery td (I know I'm lazy), so is there an easier way like:

table.content:td{
color: #39c;
background-color: #eee;
}

I know that doesn't work, but hopefully you understand what I mean. thanks for the help.

mavherick

1:46 am on Mar 6, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


To get a good understanding of CSS selector combinations:
[webmasterworld.com...]

Just remove the colon between content and td. That is if you would like it to affect all td within your table called content. You could use `>` where you had your colon if you want only the first td within your table `content` to be affected.

1:53 am on Mar 6, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


Thanks a million madcat. I guess I read Nick_W post too quickly!
3:18 pm on Mar 6, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


<add>
You can use `>` as long as the element is exactly  
one level deep within your container. If anything is
inbetween the container tag and the element you want to
change- it will not work.

Use `+` when you want to affect the next element  
in line. For ie., the element h3.content must immediately
preceed the p...

h3.content + p { 
Style this paragraph...
}
</add>