[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 350
  • Last Modified:

Selective CSS

Hi,

I have some html which has two different tables.

wrt one of the tables, I want to change the color of a row on hover and change it again on select.
With the other table I want nothing to happen on hover or select.

I am able to get the hover and select to work, however, I am not sure how to restrict it to just one table.  See attached code snippet.  I have tried adding a class selector, but obviously havn't gotten it right.

Thanks for all help
Phil

<style type="text/css">	
	tr:hover .row  {
		cursor: pointer;
		background-color: whitesmoke;
	}
	.select .row {
		background-color: rgb(208,208,208);
	}
</style>


<table border='0'  width=100%>
	<tr class='row' align='center'  onclick='messSelect("row-1");' id='row-1' >
		<td >
			blah blah
		</td>
	</tr>
	<tr class='row' align='center'  onclick='messSelect("row-2");' id='row-2' >
		<td >
			blah blah
		</td>
	</tr>
</table>


<table border='0'  width=100%>
	<tr   >
		<td >
			xyxyxyxy
		</td>
	</tr>
	<tr   >
		<td >
			xyxyxyxy
		</td>
	</tr>
</table>

Open in new window

0
BeerFizz
Asked:
BeerFizz
  • 2
1 Solution
 
LZ1Commented:
In order to target one table and not the other, you would need to add id="table1" to one of the tables.
 
0
 
LZ1Commented:
Sorry about the short post above.  
After you add the ID to the table, you will also need to add it to the CSS.  This will help you target it more effectively.
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css">  
    #table1 tr:hover .row  { 
                cursor: pointer; 
                background-color: whitesmoke; 
        } 
        .select .row { 
                background-color: rgb(208,208,208); 
        } 
</style> 
 
 

</style> 
</head> 
<body> 
    <table border='0'  width="100%" id="table1"> 
        <tr class='row' align='center'  onclick='messSelect("row-1");' id='row-1' > 
                <td > 
                        blah blah 
                </td> 
        </tr> 
        <tr class='row' align='center'  onclick='messSelect("row-2");' id='row-2' > 
                <td > 
                        blah blah 
                </td> 
        </tr> 
</table> 
 
 
<table border='0'  width="100%"  id="table2"> 
        <tr   > 
                <td > 
                        xyxyxyxy 
                </td> 
        </tr> 
        <tr   > 
                <td > 
                        xyxyxyxy 
                </td> 
        </tr> 
</table>
</body>

Open in new window

0
 
BeerFizzAuthor Commented:
Works great :)
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now