CODEWITHSUNDEEP
htmlcsscss-selectors
Carey Estes
Carey Estes

Reputation: 1564

Using * with :not in css

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

Upvotes: 5

Views: 991

Answers (2)

Ruben Vincenten
Ruben Vincenten

Reputation: 907

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)

Upvotes: 4

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 4

Related Questions