ansaurus

Question

Answer 1

+1 A:

Try this more specific one.

div.image-result table tbody tr:hover { background-color: #FFF; 
                                    color: theDefaultColor;}

Update: I've tried and it works on FF and IE8, not tested on others but should work. However, you'll have to add other styles especially "color" for the class, esle it'll take the original hover one.

Update 2: Modified based on the OP's code.

Here's the code I've used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

o.k.w 2010-01-07 08:47:43

In the light of David Dorward's comment on my answer, I think this works not because it's more specific, but because the .image-result is applied now to the correct element, rather than looking for a tr within an element to which it's applied.

David M 2010-01-07 09:00:36

I think the deifnition of 'specific' in my case could be slightly different. I meant specific as in it targets the intented element by class name amongst elements and parents.

o.k.w 2010-01-07 09:14:14

Answer 2

A:

Your second one will be recognised as a less specific selector than the first. Try this to make it more specific:

table.image-result tbody tr:hover { background-color: #FFF; }

(put image-result class wherever it is actually applied).

David M 2010-01-07 08:48:05

No, it is more specific. A class selector is in group C, while the type selectors used in the first example are in group D. http://www.w3.org/TR/CSS21/cascade.html#specificity

David Dorward 2010-01-07 08:58:12

OK. So the problem is that the class is here being applied on the TR so the selector fails.

David M 2010-01-07 08:59:18

Answer 3

+1 A:

try to use

.image-result tr:hover td { background-color:#fff; }

kosmaks 2010-01-07 08:48:28

Answer 4

+2 A:

Basically the more specific the selector is, the higher the priority the browser will give in applying the rules for that style. Your first rule is more specific so has higher priority, which is why the style isn't being applied. You can do this:

.image-result  tr:hover { background-color: #FFF !important; }

to increase the priority. That's not generally the recommended approach as it can (with some justification) be seen as hacking around the real problem. Probably a better solution is to make the new rule at least as specific as the other one:

table.image-result tbody tr:hover { background: #FFF; }

cletus 2010-01-07 08:48:41

You have your specificities backwards. A class selector is in group C, while the type selectors used in the first example are in group D. http://www.w3.org/TR/CSS21/cascade.html#specificity

David Dorward 2010-01-07 08:58:50

ansaurus

tags:

views:

answers:

Trouble with inheritance of CSS...

related questions