Lint CSS

css-lint-anchor.css

/* Prevent unsecure [target="_blank] links */
a[target='_blank']:not([rel~='noopener']):not([rel~='noreferrer']) {
  outline: 2px dashed red;
}

css-lint-form.css

/* Input or label without id or for attribute */
input:not([id]),
label:not([for]) {
  outline: 2px dashed red;
}

css-lint-header.css

/* Headers out of order */
:is(h2, h3, h4, h5, h6) ~ h1,
:is(h3, h4, h5, h6) ~ h2,
:is(h4, h5, h6) ~ h3,
:is(h5, h6) ~ h4,
h6 ~ h5 {
  outline: 2px dashed red;
}

css-lint-img.css

/* Images without alt attribute */
img:not([alt]) {
  outline: 2px dashed red;
}

css-lint-inline.css

/* Div inside inline elements */
:is(b, i, q, em, abbr, cite, code, span, small, label, strong) > div {
  outline: 2px dashed red;
}

css-lint-lang.css

/* Lang attribute in html document */
html:not([lang]):before {
  display: block;
  content: "You didn't declare lang attribute";
  color: red;
}

css-lint-picture.css

/* <picture> elements that do not contain .webp <source> */
picture > source:first-child:not([type="image/webp"])::before {
  content: "Missing a webp source";
  padding: 1em;
  display: block;
  outline: 2px solid aqua;
}