How to Achieve Anything with the New CSS :Is() Pseudo-Class That We Can't Already Achieve with Comma-Separated Queries

Can we achieve anything with the new CSS :is() pseudo-class that we can't already achieve with comma-separated queries?

You are actually dealing with basic examples but consider more complex ones like the following:

.box h1, .box h2, .box h3, .box h4

In order to avoid repeating the .box we use

.box :is(h1, h2, h3, h4)

As far as I know, this was the main motivation for :is(): avoid rule duplication.

Another common example is the table selectors:

table tr td, table tr th

now will become

table tr :is(td, th)

Is there a shorthand for [:not] Pseudo class?

The title asks a very general question which I am not sure how to interpret so this answer sticks to the specific situation with the :not pseudo class.

See MDN

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

For the selector given in the question therefore you could use

div > h3 ~ div:nth-child(5):not(.no-need-2 > div, .no-need > div, p ~ div, .no-need)

Most common browsers now support this list format but check https://caniuse.com/?search=not

stop forcing newline for comma separated selectors in CSS and put curly brace on new line

1. You need to have a formatter extension (recommended: Prettier) installed on your VS Code
2. You need stylelint and stylelint-prettier npm modules in your project. (as dev-dependencies)
3. enable stylelint auto-formatting in your prettier config: "prettier.stylelintIntegration": true
4. Add a .stylelintrc.json file to configure your stylelint rules.

it seems your desire will be satisfied by adding these 3 rules but I highly recommend probing more than 170 available rules for formatting CSS to find your best settings.

{
    "plugins": ["stylelint-prettier"],
    "rules": {
        "selector-list-comma-newline-after": "never-multi-line",
        "selector-list-comma-newline-before": "never-multi-line",
        "block-closing-brace-newline-before": "always"
    }
}

why does the pseudo selector on p not work?

The comma in your selector splits it like this:

✅ .features li:not(:first-child) h2 or p.

You seem to expect it to split it like this:

❌ .features li:not(:first-child) h2 or .features li:not(:first-child) p.

CSS doesn't have syntax which allows that kind of shorthand. you have to be explicit:

.features li:not(:first-child) h2,
.features li:not(:first-child) p { ... }

There are preprocessors which provide more convenient syntax. For example, if you were writing SASS using the SCSS syntax:

.features li:not(:first-child) {
    h2, p { ... }
}

Can multiple classes be assigned to an element using a comma?

According to specs the first one is invalid:

class = cdata-list [CS] This attribute assigns a class name or set of
class names to an element. Any number of elements may be assigned the
same class name or names. Multiple class names must be separated by
white space characters.

The second one is valid.

References

class attribute

Multiple classes inside :not()

You can use:

div:not(.one):not(.three) {
    color: #F00;
}

Fiddle

Combining :not() selectors in CSS

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class. As a jQuery selector, it works because jQuery extends its :not() functionality to allow any selector (like the .not() method).

However, your second syntax is one of the proposed enhancements to :not() in Selectors 4, and works equivalently to your first. Although the example (shown as of this writing anyway) shows a chain of :not() selectors, the proposal says:

The negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

Here a selector list is simply a comma-separated list of selectors.

If you need to negate selectors that contain combinators (>, +, ~, space, etc, for example div p), you can't use :not() in CSS; you'll have to go with the jQuery solution.

---

Related Topics