www.webdeveloper.com
Results 1 to 6 of 6

Thread: Applying two CSS classes on the same table row

  1. #1
    Join Date
    Jul 2011
    Posts
    3

    Applying two CSS classes on the same table row

    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?

  2. #2
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    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'.

  3. #3
    Join Date
    Jul 2011
    Posts
    3
    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?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by asteway View Post
    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'

  5. #5
    Join Date
    Apr 2010
    Location
    Cocoa Beach, FL
    Posts
    41

    CSS suggestion for your goals

    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

  6. #6
    Join Date
    Jul 2011
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles