Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/
<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
<tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>
I am intrigued by the fact that the first column is displaying as red instead of blue.
In my CSS rules, I initially set every first child element to have a color of 'red'. However, in the subsequent line of CSS code, all table data elements are given a color of 'blue'. My expectation was that the second rule (color: blue) would take precedence over the previous one (color: red). Could it be that the nth-child property has priority over the generic selector? Moreover, does this behavior hold true across different web browsers?