Seeking CSS Opinions
Not quite sure what the "correct" behavior should be in the HTML below. What cursor would you expect to get when you mouse over the TD and why?
<html>
<style>
TABLE.tbl1 TD
{
cursor:hand;
}
TD.td1
{
cursor:move;
}
</style>
<body>
<table class="tbl1">
<tr>
<td class="td1">what cursor is it?</td>
</tr>
</table>
</body>
</html>
Comments
- Anonymous
August 17, 2004
http://academ.hvcc.edu/~kantopet/css/index.php?page=css+inheritance&parent=using+css - Anonymous
August 17, 2004
According to your CSS, I would expect the "MOVE" cursor as the CSS applied to the TableCell (TD) overrides that which has been applied to the entire Table.
---
Hrmm... Just tested the HTML in IE and I didn't get the expected result, however in Firefox, it gave me the result I expected with the "MOVE" cursor being displayed when I mouse over the text.
Quite an interesting behaviour. Just shows that the two browsers probably had diffrent ideas in mind when they implemented the CSS specs... - Anonymous
August 17, 2004
The CSS spec says the selector with greater specificity should be applied. So it's a matter of figuring out what selector has greater specificity.
There's a <a href="http://www.w3.org/TR/CSS2/cascade.html#specificity">simple algorithm</a> you can use to figure this out. Count the number of id attributes in the selector (A). Count the number of non-id attributes and pseudo-classes in the selector (B). And count the number of element names in the selector (C). Concatenate the three values (ABC) and the higher the number, the greater the specificity.
Let's consider the first selector (TABLE.tbl1 TD). There are 0 id attributes, 1 other attribute (.tbl1), and 2 element names (TABLE and TD). Concatenate those values and you get 012, or 12.
Now the second selector (TD.td1). There are 0 id attributes, 1 other attribute (.td1), and 1 element name (TD). Concatenate those values and you get 011, or 11.
12 > 11, so the first selector has greater specificity. It should, therefore, have a hand cursor. - Anonymous
August 17, 2004
Erm, sorry about the munging from the failed marking-up of the link. Here's the plain URI:
http://www.w3.org/TR/CSS2/cascade.html#specificity - Anonymous
August 17, 2004
Greg is right. It may seem counter-intuitive at first glance, because you're apparently "overriding" the style applied by the tbl1 class with that in the rd1 class but that's not what actually happens.
The styles are cumulative, so if tbl1 specified text should be bold and td1 said it should be red, then text in that TD will be red and bold.
When styles conflict (as in the example) then the specificity rules apply. In this case, a "TD inside a TABLE" is more specific that a "TD" in general (even though a TD isn't going to appear outside a table anyway, it would make more sense if it was an "order list in an unordered list" as opposed to "unordered list"s in general). So that's why the "TD inside a TABLE" rule applies and you'll see a hand cursor. - Anonymous
August 17, 2004
Regarding firefox: I did a very brief test and Firefox 0.9 does not seem to recognize the "hand" cursor. If you replace "hand" with "wait" in the given html, IE6 and firefox behave the same. - Anonymous
August 17, 2004
'hand' is not a cursor type: http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor
'pointer' is the cursor type that is generally rendered as a hand.
If you'd like to ensure a hand, then user a URL as the cursor type. - Anonymous
August 18, 2004
Easy answer:
since Table specifies CSS class "tbl1" then IMO ALL cells should inherit "cursor:hand" and also since TD (generic) is specified then ALL tables' cells' should inherit "cursor:hand"
Now the TD in question specifies css class "td1" so THAT td should override any inheritance and specify "cursor:move". ALL other cells in that table should be "cursor:hand".
Also consider this: take off the TD qualifier from the "td1" class specifier. Apply the css "td1" class to the TR of the TD in question. IMO, ALL cells in that ROW should now override the inheritted "cursor:hand" [specified via both TABLE.tbl1,TD] and should show as "cursor:move"
This is another area where CSS inheritance is not properly pushed. - Anonymous
June 02, 2009
PingBack from http://patiochairsite.info/story.php?id=27539