Usage * s: not in css

Question

Im working on html linter using css.

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

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

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

However, I have certain instances where I have to use inline styles, i.e. canvas elements.

• How to use: not selector with *?
• Can I have several: nots, i.e.: not (canvas): not (form), etc.

Answer 1

You have a work and excludes canvas. And yes, you can bind a few :not() .

 * { 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

Rule: not () matches anything that does not match the subrule. Subrule is a valid css selector. the [canvas] record will match any element with the canvas attribute, so this is not what you want.

Proper use:

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