Will outline headings out of order in a page (from https://twitter.com/Una/status/1277652897606635523) #bookmarklet

headings-out-of-order.js

javascript: void ((function() {
  /* More bookmarklets at https://gist.github.com/iamandrewluca/61feacf07bc4f2f50e70f986c2e9b2d2 */
  const styles = document.createTextNode(`
    /* Headers out of order (i.e. h2 before h1, etc.) */
    /* Result: dotted blue outline */
    /* https://twitter.com/Una/status/1277652897606635523 */
    h2 ~ h1,
    h3 ~ h1,
    h4 ~ h1,
    h5 ~ h1,
    h6 ~ h1,
    h3 ~ h2:first-of-type,
    h4 ~ h2:first-of-type,
    h5 ~ h2:first-of-type,
    h6 ~ h2:first-of-type,
    h4 ~ h3:first-of-type,
    h5 ~ h3:first-of-type,
    h6 ~ h3:first-of-type,
    h5 ~ h4:first-of-type,
    h6 ~ h4:first-of-type,
    h6 ~ h5:first-of-type {
        outline: 2px dotted blue;
    }
  `);

  const style = document.createElement('style');
  style.appendChild(styles);
  document.head.appendChild(style);
})());