Applying two CSS classes on the same table row

**asteway** · 07-09-2011 11:31 AM

Please help me sort this out.
I have two CSS classes that should apply on the same .
The one that is taking effect is only the first one. is there any way I can merge these two?
I am a newbie in CSS.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table,td {
	color: #444444;
	font-size: 11px;
	}
.whi { color:#444444; }
.red { color:red; cursor:pointer; }
</style>
<table align="center">
<tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
 <td>adsf</td>
 <td>asdf</td>
 <td>&nbsp;</td>
</tr>
</table>
</html>

I need the td's font color to change on mouseover with the .whi and .red styles. But also I need the font size to be 11px. How can I tell html to use both css classes?

**OctoberWind** · 07-09-2011 05:53 PM

This part isn't a "class", it's just the element styles for every <table> and every <td>

HTML Code:

table,td {
	color: #444444;
	font-size: 11px;
	}

by default, the td will have font-size 11, color #444444.

onMouseOver, adding the 'red' class will change the color to "red", and make the cursor a pointer. It won't change the font-size, because, as a "cascading style" the old styles are still applied.

onMouseOut, changing the class to "whi" will return the color to '#444444'.

**asteway** · 07-11-2011 07:06 AM

Thank you for your reply and sorry for my confusion.
Can you please run the code and tell me why the color is not changing on mouseover?

**Kor** · 07-11-2011 09:36 AM

Originally Posted by asteway

Thank you for your reply and sorry for my confusion.
Can you please run the code and tell me why the color is not changing on mouseover?

Because you try to change the class of a row, not of the cell inside. The cells classes remain the same, or what you visually see from a table is the cells' display, not the rows'

**Michael_G** · 07-11-2011 09:45 AM

What may work out for you better is to use the HOVER element in your css, which allows you to change the color of the text when the mouse pointer is over a link, usually it is used with the a tag like the following:

a:hover
{
color:red;
background-color:white;
}

and for your situation you may also try:

td:hover
{
color:red;
background-color:white;
}

You may try different combinations to get your desired result. Hope this helps.

Michael G. Workman
michael.g.workman@gmail.com

**asteway** · 07-11-2011 10:24 AM

Okay, but I need the an entire row to highlight on mouseover, not a cell. For your method to help me there should be a

Code:

tr:hover
{
color:red;
background-color:white;
}

Thread: Applying two CSS classes on the same table row

Thread Tools

Display

Applying two CSS classes on the same table row

CSS suggestion for your goals

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions