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

推荐订阅源

量子位
D
DataBreaches.Net
Microsoft Security Blog
Microsoft Security Blog
V
Visual Studio Blog
GbyAI
GbyAI
美团技术团队
云风的 BLOG
云风的 BLOG
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
博客园 - 叶小钗
Engineering at Meta
Engineering at Meta
博客园 - 三生石上(FineUI控件)
N
Netflix TechBlog - Medium
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
G
Google Developers Blog
博客园 - 【当耐特】
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
宝玉的分享
宝玉的分享
阮一峰的网络日志
阮一峰的网络日志
T
The Blog of Author Tim Ferriss
Y
Y Combinator Blog
U
Unit 42
P
Proofpoint News Feed
V
V2EX

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