This is a confusing behavior that I’m seeing in FireFox and Chrome: I have one HTML file with styles from two CSS files. Sometimes styles apply from second file and sometimes from first file. The weird behavior can be seen in the following example:
HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="cssTHTDquestion1.css"/>
<link rel="stylesheet" href="cssTHTDquestion2.css"/>
</head>
<body>
<table>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
<td>data 1</td><td>data 2</td><td>data 3</td></table>
</body>
</html>
cssTHTDquestion1.css:
table th,table td{
background-color:red;
}
cssTHTDquestion2.css:
th,td{
background-color:green;
}
Now I would expect to see this output (because cssTHTDquestion2.css is included after cssTHTDquestion1.css):
But instead I get this (which means styles from cssTHTDquestion1.css had a higher priority even though cssTHTDquestion2.css sets the latest settings):
Even Firebug (quite unexpectedly) shows that settings from cssTHTDquestion1.css are applied:
In order to fix it I can change the cssTHTDquestion2.css to look like this:
table th,table td{
background-color:green;
}
But why changing th,td to table th,table td changes the priority? what am I missing here? Why the color is being applied from cssTHTDquestion1.css rather than cssTHTDquestion2.css? cssTHTDquestion2.css was included later (in HTML code) so I assume it has higher priority.
table tdis more specific than justtd.If you don’t understand it, try to describe the selector, and it may seem obvious:
table td= Select<td>which is a child of<table>td= select any<td>.For the basic understanding of specifity, see http://www.w3.org/TR/css3-selectors/#specificity.