css :not() selector with selector list incoming

Question

I have many css selectors and many selector exception, so I use :not to leave them out...

example (just some selectors I don't need):

[class*="-dashboard-"]:not([class$="-binding"]), [class*="-dashboard "]:not([class$="-binding"]), [class$="-dashboard"]:not([class$="-binding"])

But what I instead would prefer is:

([class*="-dashboard-"],[class*="-dashboard "],[class$="-dashboard"]):not([class*="-binding-"],[class*="-binding "],[class$="-binding"])

or something else, that ist shorter than the working one and easier to edit and not so repetitive...

My problem is that I have that selectors in big list. The user is allowed to add/remove lists so I have to dynamically change the selectors and exceptions.

Does anybody have an idea to short that one???

Answer 1

Usually, the way my CSS looks is with increasing specificity. A very generic rule sets a whole lot of defaults, and then something that positively matches one of those rules you gave us overrides that style with something else.

For instance, you could set a higher-priority rule for anything ending in "-binding" that makes elements invisible, or whatever you intend for them. In simple terms, to calculate a CSS rule's priority:

• Add 100 for each ID selector
• Add 10 for each class selector
• Add 1 for each other selector

I think you'd do well by having more classes in your elements that are easily selected, ie anything that adds a lolwtf-dashboard class should also add a dashboard class that's easily CSS-selected.