CSS selectors tips

css-tips.css

/*
 * CSS debug tips
 * Inspired by @argyleink
 */

/* Debug images without "width" or "height" attributes */
img:not([width]), img:not([height]) {
    outline: 2px dotted red;
}

/* Debug images without "alt" attribute with CSS */
img:not([alt]) {
    outline: 2px dotted red;
}

/* Debug lists that have something other than an "<li>" inside */
:is(ul, ol) > *:not(li) {
    outline: 2px dotted red;
}

/* Debug links with no "href", an empty "href" or a "#" "href" */
a:is(:not([href]), [href=""], [href="#"]){
    outline: 2px dotted red;
}