Css Selector "(A or B) and C"?

Leveling Up: Using the :is() Pseudo-class

While the standard approach works well, there's a niftier way to achieve the same using the :is() pseudo-class. This provides a more condensed and neat syntax. The catch? It's an experimental CSS feature. Big words, I know.

.c:is(A, B) {
  /* Equivalent to the previous selector but we have reached CSS elite status now */
}


This :is() function selects any elements having the .c class that are also A or B. But, always check for browser support before incorporating :is() extensively.

The CSS Preprocessor Charm: LESS or SASS

Believe it or not, there's no better method to group multiple logical combinations efficiently in CSS than the humble comma operator. However, preprocessors like LESS or SASS can add a magic touch. They empower you with features to write complex logical styling in a more structured way.

Consider the :not() pseudo-class for excluding certain elements from the selection. E.g., .x:not(.c). Remember: preprocessors compile down to standard CSS, and are not native CSS jargon.

Gauge Selector Specificity & Embrace Practicality

Selector specificity isn't just a fancy term. It's crucial. Different selectors have different weights affecting the cascade and eventually the final styling.

Weigh the specificity and usability when deciding your combat force between :is(), :not(), and our old friend, the comma operator.

Browser Support & Preprocessors: Best Pals or Worst Enemies?

Newer CSS features like :is() might sound like the next big thing, but browser compatibility can be a spoiler. Reminder: CSS preprocessors require to be compiled into CSS and not all workflows support them.

Structured for Precise Selection

A trick for complex logical combinations: consider using sub-classes, like .a.x, .b.x. It improves target selection with an added bonus of enhanced performance and readability.

Future Proofing: Keep an Eye on :is()

Finally, with the :is() function being experimental, it's wise to keep watching CSS Working Group (CSSWG) drafts to know when it moves from experimental to standard.