:nth-of-type selector overrides all other CSS selectors

Question

I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority.

I have the following CSS:

table                   { border: 1px solid black; }
tr:nth-child(odd)       { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td                      { background-color: green; }

I thought that whatever comes last takes priority, so in my opinion all cells in the table would be green.

However the even cells are still blue, as per the nth-of-type selector. Even when I put this to the top and remove the green td line, the blue is still shown in the middle with only the odd cells showing in red.

Can someone explain why the nth-of-type seems to take precedent over everything else?

Here is the example:

table { border: 1px solid black; }
tr:nth-child(odd) { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td { background-color: green; }

<table style="width: 100%;">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

https://jsfiddle.net/e6157xwz/

Answer 1

So what's this?

What's going on here is selector specificity.

The following list of selector types is by increasing specificity:

1. Universal selectors (e.g. *)
2. Type selectors (e.g. h1)
   Class selectors (e.g. .example)
   Attribute selectors (e.g. [type="radio"])
3. Pseudo-classes (e.g., :hover)
4. ID selectors (e.g. #example)
5. Inline style (e.g. style="font-weight:bold")

Simplified explanation for your code

In your example, the pseudo selector :nth-of-type(even/odd) is category 3 which takes precedence since the concurring selectors are only type selectors (category 2.1).

Important note

Deviating from MDN information available behind that link, I have corrected that type, class and attribute selectors actually have the same specificity.

Answer 2

The rule with the blue is more specific and that is why it takes precedence.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity