CSS 3 row of :not() : Is there a way to write this more effective?

Question

Having a CSS code like this (makes sense for certain cases obviously):

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border:1px solid #fff;
  background-color:#f3f4f5;
}

<div><input type="text" name="alpha" /></div>
<div><input type="email" name="beta" /></div>
<div><input type="number" name="gamma" /></div>
<div><input type="checkbox" name="delta" /> Really?</div>
<div><input type="file" name="epsilon" /></div>
<div><input type="submit" name="zeta" value="Here we go" /></div>

Is there a way to write this like:

input:not([type="submit OR checkbox OR radio OR file"]) { // ... }

In order to avoid this row of :not()?

I guess it's already the more effective way ... unless you consider a class and you apply your style on it — Temani Afif, Jul 03 '18 at 12:50
As i see here:https://stackoverflow.com/questions/5684160/can-the-not-pseudo-class-have-multiple-arguments it seem most effective — לבני מלכה, Jul 03 '18 at 12:52
Have a read of this - it's good article on how to write efficient selectors - yours isn't great: https://csswizardry.com/2011/09/writing-efficient-css-selectors/ - ps I don't see why people go to such lengths to avoid using classes - it's what they're there for — Pete, Jul 03 '18 at 12:56
@Pete Imagine a website with 50 different forms from three different form builders - you really want to put classes in that? Furthermore there are often cases where you hardly can touch the HTML. — Blackbam, Jul 03 '18 at 12:59
@לבנימלכה wow really seems like. An answer reasoning WHY one has to duplicate it would be really useful. — Blackbam, Jul 03 '18 at 13:00
@Blackbam, why not - if they are forms and they are styled differently classes would be best and much easier to target than than adding a load of nots all over the place, anyway if you don't want help and are just here to criticise then good luck with your awful selectors and slow repaints and bloated stylesheets. Also if you had all those forms and they were all styled differently then your site would look awful anyway. Also I code properly so I have control over all my code and cannot imagine a world where I wouldn't — Pete, Jul 03 '18 at 13:01

score 2 · Accepted Answer · answered Jul 03 '18 at 12:59

2

What you can do is to reduce its size. If we consider the fact that all the types are known, we have k only inside checkbox and f only inside file and so on.

You can then have something like this:

input:not([type*="su"]):not([type*="k"]):not([type*="ra"]):not([type*="f"]) {
  border:1px solid #fff;
  background-color:#f3f4f5;
}

<div><input type="text" name="alpha" /></div>
<div><input type="email" name="beta" /></div>
<div><input type="number" name="gamma" /></div>
<div><input type="checkbox" name="delta" /> Really?</div>
<div><input type="file" name="epsilon" /></div>
<div><input type="submit" name="zeta" value="Here we go" /></div>

PS: I may be wrong forgetting some types but the logic remain the same, finding the shortest word to use.

answered Jul 03 '18 at 12:59

Temani Afif

245,468
26
309
415

True thats shorter :-) It would be awesome to have an attribute value regex in CSS but I guess there is no thing like this? – Blackbam Jul 03 '18 at 13:02
@Blackbam even if we can do regex with CSS, it's hard to find a pattern simply because there is no pattern ... the best you can do is to list all the types and try to find the shortest words/letters to use ;) – Temani Afif Jul 03 '18 at 13:03
After even more research I confirm, there is no better way to do it yet. A CSS selector which allows regular expressions would be great though in the future. There are some jQuery extensions for this purpose. – Blackbam Jul 03 '18 at 13:18
@Blackbam While this is shorter, I'd contend that it's a worse way to do this, as it's not as maintainable. Someone reading the original knows immediately exactly what it's attempting to do. Someone looking at this then needs to think about every possible `type` and mentally apply the matches. In addition, it's somewhat lower performance and would tend to be less future-proof. – Makyen Jul 04 '18 at 23:42
@Makyen True, at least for this use case the the drawback in readability is probably not worth it. While this is a correct answer to the question, it is more important to notice that there is currently no way to combine attribute values in a single :not. – Blackbam Jul 05 '18 at 00:06

CSS 3 row of :not() : Is there a way to write this more effective?

1 Answers1