CSS selector form:last-child doesn't work

It seems the CSS pseudo-class :last-child doesn't work on form elements, but :first-child does.

form:first-child {
  border: 1px solid blue;
}
form:last-child {
  border: 1px solid red;
}

<body>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</body>

JSFiddle

I'm only interested in styling the form element itself and I've only tested this in Chrome. The first form gets a blue background and the second gets no background. Chrome's inspector doesn't show :last-child applied to the second form either. So how does one select the last form using CSS?

Solution

This works just fine when you create a proper HTML file, the reason it doesn't work in your fiddle is because some online tools add some scripts just before the body element closing tags, thus the form you are expecting to have the styling, is not in fact the body's last-child.

To see it working on your fiddle just wrap the forms in a div container and you should see it as expected:

<body>
  <div>
    <form>
      <p>First Form</p>
    </form>
    <form>
      <p>Second Form</p>
    </form>
  </div>
</body>

you can refer to this question for more info.