title: CSS last of type does not match while still loading
body: <p>I think I discovered a bug in chrome and opera and would like a solution to make the css selector <code>section:last-of-type</code> work while the document is still loading. The bug only appears while the document is still loading: here's a minimal example in NodeJS to expose the bug:</p>
  
  <p>What happens is that last-of-type does not match while the document is still loading. In IE it matches, then matches twice, then matches correctly again when loaded. It works fine in Firefox. </p>
  
  <p><em>last-of-type.js</em></p>
  
  <pre><code>"use strict";
  const http = require(`http`);
  
  const PORT = 8080;
  
  const htmlStart = `&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;html streaming&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;style&gt;
  
  section {
      position: absolute;
      left: 0;
      right: 0;
  }
  
  section:last-of-type {
      animation: comin 1.4s ease 0s;
      left: 0;
      opacity: 1;
  }
  
  @keyframes comin {
      0% {
        left: 100%;
      }
      100% {
        left: 0;
      }
  }
  
  section:not(:last-of-type) {
     animation: comout 1.4s ease 0s;
     left: -100%;
     opacity: 0;
  }
  
  @keyframes comout {
      0% {
        left: 0;
        opacity: 1;
      }
      100% {
        left: -100%;
        opacity: 0;
      }
  }
  &lt;/style&gt;
      &lt;script&gt;
          var headLoaded = Date.now();
          document.addEventListener("DOMContentLoaded", function() {
             console.log((Date.now() - headLoaded) / 1000);
           });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;last-of-type test&lt;/h1&gt;
  
      &lt;section&gt;
          &lt;h2&gt;First slide&lt;/h2&gt;
          &lt;p&gt;Some text 111111111&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;h2&gt;2&lt;/h2&gt;
          &lt;p&gt;22222222222222&lt;/p&gt;
      &lt;/section&gt;
  
  
  `;
  
  const htmlEnd = `
  &lt;p&gt;html finised loading&lt;/p&gt;
  &lt;/body&gt;&lt;/html&gt;`;
  
  
  const INTERVAL = 8000; // ms
  const server = http.createServer((request, response) =&gt; {
    response.setHeader(`Content-Type`, `text/html`);
    response.writeHead(200);
    response.write(htmlStart);
    setTimeout(function () {
          response.write(`&lt;section&gt;
              &lt;h2&gt;3&lt;/h2&gt;
              &lt;p&gt;33333333333&lt;/p&gt;
          &lt;/section&gt;`);
    }, INTERVAL);
    setTimeout(function () {
          response.end(htmlEnd);
    }, 3 * INTERVAL);
  });
  
  server.listen(PORT);
  console.log(`Listening on ${PORT}`);
  </code></pre>
  
  <p>The same loaded all at once works just fine. It confirms that the syntax is correct.</p>
  
  <p><em>last-of-type-test.html</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;html streaming&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;style&gt;
  
  section {
      position: absolute;
      left: 0;
      right: 0;
  }
  
  section:last-of-type {
      animation: comin 1.4s ease 0s;
      left: 0;
      opacity: 1;
  }
  
  @keyframes comin {
      0% {
        left: 100%;
      }
      100% {
        left: 0;
      }
  }
  
  section:not(:last-of-type) {
     animation: comout 1.4s ease 0s;
     left: -100%;
     opacity: 0;
  }
  
  @keyframes comout {
      0% {
        left: 0;
        opacity: 1;
      }
      100% {
        left: -100%;
        opacity: 0;
      }
  }
  &lt;/style&gt;
      &lt;script&gt;
          var headLoaded = Date.now();
          document.addEventListener("DOMContentLoaded", function() {
             console.log((Date.now() - headLoaded) / 1000);
           });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;last-of-type test&lt;/h1&gt;
  
      &lt;section&gt;
          &lt;h2&gt;First slide&lt;/h2&gt;
          &lt;p&gt;some text&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;h2&gt;2&lt;/h2&gt;
          &lt;p&gt;22222222222222&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;h2&gt;3&lt;/h2&gt;
          &lt;p&gt;33333333333&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Any hints would be appreciated.</p>