Lint HTML in CSS

20 Jun 2020 • 1 min read

Linting HTML with CSS is a great tool to help find problematic markup.

Empty Links

This selector hunts for links that have:

• no href
• an empty href
• a "#" href (button perhaps?)

a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red;
}

Missing Alt Text

Highlight images missing alt text with:

img:not([alt]) {
  outline: 2px dotted red;
}