Lint HTML CSS #lintHTMLwithCSS

lint.css

/* forbidden nesting */
:not(figure) > figcaption,
:not(fieldset) > legend,
:not(dl) > :is(dt, dd),
:not(tr) > :is(td, th),
:not(select) > :is(option, optgroup),
:not(table) > :is(thead, tfoot, tbody, tr, colgroup, caption) {
  outline: 2px dotted red;
}

/* Button w/o type is a submit button */
button:not([type]) {
  outline: 2px dotted salmon;
}

/* unable to infer size OR aspect ratio */
img:not([width]):not([height]) {
  filter: blur(20px);
}

/* taborder misuse */
[tabindex]:not([tabindex="0"], [tabindex="-1"]) {
  outline: 2px dotted red;
}

/* links go nowhere? */
a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red;
}

/* Headers out of order (i.e. h2 before h1, etc.)
   Result: dotted blue outline
*/
h2 ~ h1,
h3 ~ h1,
h4 ~ h1,
h5 ~ h1,
h6 ~ h1,
h3 ~ h2,
h4 ~ h2,
h5 ~ h2,
h6 ~ h2,
h4 ~ h3,
h5 ~ h3,
h6 ~ h3,
h5 ~ h4,
h6 ~ h4,
h6 ~ h5 {
  outline: 2px dotted blue;
}