I'm attempting to distinguish the CSS properties of two tables based on which DIV they are contained within. If you take a look at http://jsfiddle.net/jdb1991/tpXKT/, you will notice that the table in "resultA" is utilizing the TD property designated for "resultB".
I am aware that this situation has occurred due to the "cascade" of properties, but why is it happening even though I have utilized the #resultB selector? Is this not considered valid?
Just to keep Stack content:
#resultA table {border-collapse: collapse}
#resultA table th, td {border: 1px solid black}
#resultA table td {background-color: blue}
#resultB table {border-collapse: collapse}
#resultB table th, td {border: 5px solid black}
#resultB table td {background-color: red}
<div id="resultA">
<table>
<tr>
<th>Result</th>
</tr>
<tr>
<td>11.5</td>
</tr>
</table>
</div>