惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
Microsoft Azure Blog
Microsoft Azure Blog
Jina AI
Jina AI
Hugging Face - Blog
Hugging Face - Blog
A
About on SuperTechFans
Y
Y Combinator Blog
D
DataBreaches.Net
I
InfoQ
Recent Announcements
Recent Announcements
Last Week in AI
Last Week in AI
G
Google Developers Blog
博客园_首页
博客园 - 司徒正美
V
V2EX
Stack Overflow Blog
Stack Overflow Blog
博客园 - 叶小钗
Engineering at Meta
Engineering at Meta
Apple Machine Learning Research
Apple Machine Learning Research
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog
MongoDB | Blog
MongoDB | Blog
博客园 - 【当耐特】
D
Docker
量子位

Miriam Eric Suzanne

Butter bells, fresh from the kiln Butter bells, fresh from the kiln Butter bells, fresh from the kiln I had to look it up I Laser-cut pottery throwing gauge Tech continues to be political Aggregating my distributed self A web component for CodePen embeds? We don Eleventy buckets & cascade layers A slash-why proposal User styles on the web Custom element, two ways New year, same (terrible) Mia CSS @scope Reclaiming my time Cascade Layers Javascript automation on Mac Personal Histories Ancient Web Browsers Critical CSS? Not So Fast! CSS tie-dye gradient backgrounds Personal website redesign Request for Comments: Sass Color Spaces A long-term plan for logical properties? Container queries in browsers! I never let things be small A whole cascade of layers This content won
Complex vs compound selectors
2022-06-15 · via Miriam Eric Suzanne

In CSS, there are compound selectors and also complex selectors, and I never remember which is which. Do you need to learn the difference? Probably not. But I’m tired of looking it up.

From the specification:

A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element.

Simple selectors are all the little bits – a class, a tag, an ID, etc. Those can be combined in various ways.

These are compound selectors:

img#hero {}
a:focus {}
.only.with.all.of.these.classes {}

A complex selector is a sequence of one or more compound selectors separated by combinators.

Those compound selectors weren’t complex enough for you? Try combining them! These selectors are complex:

#hero img {}
a:focus > .icon {}
.only.with ~ .all.of ~ .these.siblings {}

Simple selectors describe element properties, that can get merged together into compound selectors describing entire elements, and then joined into complex selectors that put those elements in the context of relationships. And we can string all that together into selector lists, targeting multiple elements based on a variety of properties and relationships. It’s a big world out there, kids. A big, declarative, cascading world.

Now you I know. Now you I can forget again, and know exactly where to look.

© Miriam Eric Suzanne,
protect trans kids