Trouble with inheritance of CSS

Question

I have some problem with my CSS Style. Currently, i have something like this:

table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}

After this, i found out that i need to have some table somewhere without the hover. So i go ahead and use this to overide:

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

but unfortunately, this do nothing on the TR.

Can you suggest what should i do?

        <div id="image-box">
            <div>
                <span>Search Image: </span>
                <%= Html.TextBox("img-search") %>
                <%= Html.Hidden("img-submitto", Url.Action("photopicker", "ajax"))%>
                <button id="img-submit">Search</button>
            </div>
            <div class="image-result">
 <table>
     <tbody><tr>
            <td>c</td>
            <td>c</td>
           </tr>
    </tbody>
</table>
                </div>
            </div>

Probably the two spaces instead of one in the second selector is the problem? — Jimmie Lin
– Jimmie Lin, Commented Jan 7, 2010 at 8:47
What does the HTML look like? I suspect the .image-result tr:hover selector doesn't actually match. — Quentin
– Quentin, Commented Jan 7, 2010 at 8:59
@DucDigital: Wow, that makes my answer invalid, I've made the wrong assumption. This selector "div.image-result table tbody tr:hover" should work then. I've updated my answer as well. — o.k.w
– o.k.w, Commented Jan 7, 2010 at 9:54

cletus · Accepted Answer · 2010-01-07 08:48:41Z

2

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; }

answered Jan 7, 2010 at 8:48

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quentin Over a year ago

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. w3.org/TR/CSS21/cascade.html#specificity

kosmaks · Accepted Answer · 2010-01-07 08:48:28Z

1

try to use

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

answered Jan 7, 2010 at 8:48

kosmaks

1171 gold badge2 silver badges6 bronze badges

Comments

o.k.w · Accepted Answer · 2010-01-07 09:53:34Z

1

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">
<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>

edited Jan 7, 2010 at 9:53

answered Jan 7, 2010 at 8:47

o.k.w

25.9k6 gold badges68 silver badges64 bronze badges

2 Comments

David M Over a year ago

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.

o.k.w Over a year ago

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.

David M · Accepted Answer · 2010-01-07 08:48:05Z

-1

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).

answered Jan 7, 2010 at 8:48

David M

73.2k13 gold badges164 silver badges187 bronze badges

2 Comments

Quentin Over a year ago

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. w3.org/TR/CSS21/cascade.html#specificity

David M Over a year ago

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

Collectives™ on Stack Overflow

Trouble with inheritance of CSS

4 Answers 4

1 Comment

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related