last-of-type doesn't work with custom elements in IE11 and Edge

Question

.foo bar:last-of-type {
  background-color: red;
}

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <span>span</span>
</div>

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <baz>baz</baz>
</div>

The last bar appears red in both cases in Chrome and Firefox. In IE11 and Edge, however, it doesn't work in the second scenario. What's going on?

Answer 1

IE appears to be treating all unknown elements as being the same element type. If you remove the bar type selector, you'll see that IE matches the baz element (and only that):

.foo :last-of-type {
  background-color: red;
}

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <span>span</span>
</div>

<div class="foo">
  <bar>bar</bar>
  <bar>bar</bar>
  <bar>bar</bar>
  <baz>baz</baz>
</div>

This behavior has also been seen in Microsoft Edge.

Has this been acknowledged as a bug by Microsoft? Well I haven't found any bug reports to this effect. Is this a spec violation? That depends on whether you consider unknown elements to be of the same element type (note that I'm speaking in terms of the DOM, not HTML). Neither the Selectors nor DOM specs make even so much as a mention of unknown elements (presumably because unknown elements are non-conforming in the first place).

Note that I keep saying "unknown element" because you don't actually have a custom element until you register it (thereby making it a known element like all other standard elements). Furthermore, IE does not support custom elements as defined by any of the upcoming standards, and Microsoft Edge hasn't shipped the feature yet. Custom elements are fine, as long as you're working with browsers that either support the feature or polyfills thereof. Unknown elements, as with any other intentional deviation from the standard, are unequivocally bad practice and can result in unexpected behavior, even if the spec requires browsers to treat them as first-class citizens for the purposes of the DOM and CSS, and the reasons for this are well argued in this answer.

Answer 2

Looks like IE11/Edge are being thrown off by a custom element coming after the bar element when applying last-of-type.

In your first example, your list ends with a span – a recognized HTML element.

In your second example, if you replace baz with a recognized element – span, textarea, etc. – it also works in IE11/Edge.

This appears to be a bug, as there should be no problem using custom elements: Proper way to apply CSS to HTML5 custom elements