CSS3 combining selectors with OR instead of AND

by

You’ll need to split them up using a comma:

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

The problem with using a comma:

… is that you can’t do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by Selectors 4, either because it wasn’t proposed until recently, or it was proposed but didn’t make the cut for level 3.

In level 4 of Selectors you will be able to do something like this:

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

Currently, this is being implemented under its originally-proposed name, :any(), with the prefixes :-moz-any() and :-webkit-any(). But using :any() in public-facing CSS is pointless given that

  1. only Gecko and WebKit support it; and

  2. you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:

    body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

In other words, until implementations update themselves to the standardized :matches(), there is no other viable solution (save from using a preprocessor to generate the repeated selectors for you).

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Is there a CSS selector for text nodes?
  3. How do I select the “last child” with a specific class name in CSS? [duplicate]
  4. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  5. How to combine class and ID in CSS selector?
  6. :first-child not working as expected
  7. What is the difference between :first-child and :first-of-type?
  8. Does CSS have a :blur selector (pseudo-class)?
  9. Specify multiple attribute selectors in CSS
  10. Should I use single or double colon notation for pseudo-elements?
  11. How to make Internet Explorer 8 to support nth child() CSS element?
  12. Universal selector * and pseudo elements
  13. How to only show certain parts with CSS for Print?
  14. Why use an attribute selector to match classes?
  15. Browser support for CSS :first-child and :last-child
  16. CSS selector to get deepest element of specific class in the HTML tree
  17. How do I get the nth child of an element using CSS2 selectors?
  18. Vertically centering content of :before/:after pseudo-elements
  19. What’s the difference between CSS3’s :root pseudo class and html?
  20. What does .container.\31 25\25 mean in CSS?
  21. Can you target an element with CSS only if 2 classes are present?
  22. CSS combinator precedence?
  23. What is caret symbol ^ used for in css when selecting elements?
  24. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  25. CSS specificity or inheritance?
  26. Can I target all tags with a single selector?
  27. What CSS selector can be used to select the first div within another div
  28. CSS Selector for not a child of element type?
  29. :last-child pseudo-class mixed with attribute selector not working
  30. CSS selector based on width?

Leave a Comment