Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

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

I've been reading up on the new pseudo-classes in CSS Selectors Level 4.

The pseudo-class :is() immediately caught my eye, but after an all-too-brief moment of enthusiasm... I was suddenly uncertain if it introduced any new capability at all.

In A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors, Stephanie Eckles introduces several use cases, including:

  • :is(-ua-invalid, article, p)
  • :is(#id, p)
  • :is(p, a)
  • :is(h1, h2, h3)
  • :is(h2, h3):not(:first-child)
  • p:is(article > *)

Looks great, but... aren't these just aliases for:

  • -ua-invalid, article, p
  • #id, p
  • p, a
  • h1, h2, h3
  • h2:not(:first-child), h3:not(:first-child)
  • article > p

Apart from the fifth bullet above, the comma-separated lists of selectors are actually shorter (and, possibly, more efficient) than the :is() pseudo-class syntax... mostly because the :is() function is simply employed to enclose that list (which already represents valid syntax) in parens.

Have I missed something? Are there cleverer things you can do with :is() that leave comma-separated lists of CSS selectors behind?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...