Using * with :not in css

Question

Im working on a html linter using css.

Reference: https://bitsofco.de/linting-html-using-css/

I like the idea of highlighting elements that have inline styles like so:

*[style] {
    color: red !important;
    border: 5px solid red !important; 
}

However, I do have certain instances where I have to use inline styles, ie canvas elements.

1. How do I use the :not selector with the *?
2. Can I have multiple :nots, ie :not(canvas):not(form), etc

Answer 1

What you have works and excludes the canvas. And yes, you can chain multiple :not()s like that.

* {
  border: 1px solid black;
}
*[style]:not(canvas):not(form) {
    color: red !important;
    border: 5px solid red !important;
}

<canvas style="foo">canvas</canvas>
<form style="foo">form</form>
<div style="foo">div</div>

Answer 2

the :not() rule matches anything not matching the subrule. The subrule is a valid css selector. writing [canvas] will match any element with a canvas attribute, so this isn't what you want.

The correct usage is:

*[style]:not(canvas):not(form)