CSS :has() Unlimited Power

igalia 19 views 43 slides Mar 05, 2025
Slide 1
Slide 1 of 88
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74
Slide 75
75
Slide 76
76
Slide 77
77
Slide 78
78
Slide 79
79
Slide 80
80
Slide 81
81
Slide 82
82
Slide 83
83
Slide 84
84
Slide 85
85
Slide 86
86
Slide 87
87
Slide 88
88

About This Presentation

In this conference talk from late 2022, Eric Meyer presents the story of the CSS :has() pseudo class and how it came to be, dives into the details of how it works, and scratches the surface of the amazing powers it brings to developers.

Size: 11.95 MB
Language: en
Added: Mar 05, 2025
Slides: 43 pages

Slide Content

Eric Meyer
Developer Advocate, Igalia
Co-founder, An Event Apart CSS :has()
Unlimited Power

Eric Meyer
Developer Advocate, Igalia
Co-founder, An Event Apart CSS :has()
Unlimited Power

1996
CSS1

1998
CSS2

CSS1
CSS2
Simple selectors
Complex selectors

CSS1
CSS2
element, .class., #id
element, .class, #id,
[attr], a > b, a + b, …a > b

a > b

a b>

a b<

shauninman.com/archive/2008/05/05/css_qualified_selectors CSS Qualified Selectors

“The problem is that browsers cannot store all
of the information they need to know exactly
what to invalidate when something in the DOM
changes. They end up using a tainting model
that inevitably (in the worst case scenarios)
leads to over-invalidation.”shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942

BROWSER VENDORS

vimeo.com/223432117 vimeo.com/286945944 Solving container queries today Contain Your Excitement

vimeo.com/223432117 vimeo.com/286945944 Solving container queries today Contain Your Excitement

+

:has()

caniuse.com/css-has
Retrieved 19 July 2022

caniuse.com/css-has
Retrieved 9 December 2022

a:has(b)
a:has-relationship(b)

p:has(a) p:has(> img)
<p>
<a href="…">…</a>
</p>
<p>
<span>
<a href="…">…</a>
</span>
</p>
<p>
<span>
<span>
<a href="…">…</a>
</span>
</span>
</p>
<p>
<img src="…" alt="…">
</p>
<p>
<span>
<img src="…" alt="…">
</span>
</p>
<p>
<span>
<span>
<img src="…" alt="…">
</span>
</span>
<img src="…" alt="…">
</p>

p:has(a) p:has(> img)
p
a
p
span
a
p
span
span
a
p
img
p
span
p
img
span
span
img
img

p:has(a) p:has(> img)
p
img
p
span
p
img
span
span
img
img
p
a
p
span
a
p
span
span
a

p:has(a) p:has(> img)
p
a
p
span
a
p
span
span
a
p
img
p
span
p
img
span
span
img
img

*:has(+ script.adjs)
<div>
…(ad markup here)…
</div>
<script class="adjs">
…
</script>
<div>
…(ad markup here)…
</div>
<main>
…(main content)…
</main>
<script class="adjs">
…
</script>
<main>
…(main content)…
</main>
<div>
…(ad markup here)…
</div>

div:has(> script) + *.advert
<div>
<script class="adjs">
…
</script>
</div>
<iframe class="advert">
…
</iframe>
<iframe class="advert">
…
</iframe>

div:has(> script) + *.advert
<div>
<script class="adjs">
…
</script>
</div>
<img src="…" alt="…">
<iframe class="advert">
…
</iframe>

div:has(> script) + *:has(*.advert)
<div>
<script class="adjs">
…
</script>
</div>
<div>
<div class="advert">…</div>
</div>
<div>
<div class="advert">…</div>
</div>

*:has(script.adjs) > *
<header>
<div class="advert">
…
</div>
<img src="…" alt="…">
<script class="adjs">
…
</script>
</header>
<div class="advert">
…
</div>
<img src="…" alt="…">
<script class="adjs">
…
</script>

div:has([aria-label="Sponsored"])
<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
<div aria-label="Sponsored">
</div>
</div>
</div>

div:has([aria-label="Sponsored"])
<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
<div aria-label="Sponsored">
</div>
</div>
</div>

div:has([aria-label="Sponsored"])
<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
<div aria-label="Sponsored">
</div>
</div>
</div>
{display: none;}

<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
<div aria-label="Sponsored">
</div>
</div>
</div>
div:has([aria-label="Sponsored"])

<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
<div aria-label="Sponsored">
</div>
</div>
</div>
div:has([aria-label="Sponsored"])

Invalid :has()

main:has(div:has( + script))
Invalid :has()
:has() INSIDE :has()!!!

main:has(div::before)
Invalid :has()
a pseudo-element inside :has()!!!

::slotted(p:has(img))
Invalid :has()
:has() inside a pseudo-element!!!

p::first-line:has(img)
Invalid :has()
:has() following a pseudo-element!!!

p:has(a[href]:visited)
Limitation on :has()
:visited can NEVER be selected

Performance?

vimeo.com/223432117 vimeo.com/286945944 Solving container queries today Contain Your Excitement

<div>
<h3>High-Quality Baseball Cap</h3>
<img src="…" alt="">
<p class="price">
<del>$40</del> $25
<small>(40% off)</small>
</p>
<a href="…">Sizing chart</a>
<p class="sale">Sale</p>
<p class="coupon">Save an extra 20%
with code: SCORE</p>
</div>
Performance?

<div>
<h3>
<img src="…" alt="">
<p class="price">
<del>
<small>
<a href="…">
<p class="sale">
<p class="coupon">
Performance?

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div .sale

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div p del

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div:has(p del)

Performance?
div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div:has(p del)
del

div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div:has(p del)
p del
Performance?!

div
h3
img src="…" alt=""
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div:has(p del)
p del
del
Performance?!

Performance?!

Performance?!

Use Cases?

<div>
<h3>High-Quality Baseball Cap</h3>
<img src="…" alt="">
<p class="price">
<del>$40</del> $25
<small>(40% off)</small>
</p>
<a href="…">Sizing chart</a>
<p class="sale">Sale</p>
<p class="coupon">Save an extra 20%
with code: SCORE</p>
</div>

<div>
<h3>
<img src="…" alt="">
<p class="price">
<del>
<small>
<a href="…">
<p class="sale">
<p class="coupon">

<div>
<h3>
<img src="…" alt="">
<p class="price">
<del>
<small>
<a href="…">
<p class="sale">
<p class="coupon">

<div>
<h3>
<img src="…" alt="">
<p class="price">
<del>
<small>
<a href="…"> <p class="sale">
<p class="coupon">.sale .sale .coupon .sale .coupon

.coupon.sale .sale.sale .coupon<div>
<h3>
<img src="…" alt="">
<p class="price">
<del>
<small>
<a href="…">
<p class="sale">
<p class="coupon">

.gallery > div:has(.sale) {
box-shadow: 0.25em 0.25em 0.33em #BBB;
border-color: #D00;
border-width: 2px;
}
.coupon.sale .sale.sale .coupon

.gallery > div:has(.coupon) {
box-shadow: 0 0 1em #BCB inset;
}
.coupon.sale .sale.sale .coupon border-width: 2px;
}

.gallery > div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
.coupon.sale .sale.sale .coupon box-shadow: 0 0 1em #BCB inset;
}

.gallery > div:has(.sale, .coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
.coupon.sale .sale.sale .coupon

.gallery > div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
.gallery > div:has(.coupon) {
box-shadow: 0 0 1em #BCB inset;
}
.gallery > div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}.coupon .sale .sale .sale .coupon

<div>
<h3>
<img src="…" alt="">
<p class="price">
<a href="…">
.coupon.sale .sale.sale .coupon
<p class="sale">
<p class="coupon">
<div class="offers">

.coupon.sale .sale.sale .coupon
.gallery div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
.gallery div:has(.coupon) {
box-shadow: 0 0 1em #BCB inset;
}
.gallery div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
>
>
>

.coupon.sale .sale.sale .coupon
.gallery div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}
.gallery div:has(.coupon) {
box-shadow: 0 0 1em #BCB inset;
}
.gallery div:has(.sale):has(.coupon) {
box-shadow: 0.67em 0.67em 0.75em #999;
border-width: 4px;
outline: 3px solid #070;
}

html:has(.about-page) {
background: hsl(50deg,15%,93%);
}
body:has(nav.subnav) header.page {
margin-block-end: 0;
}
.hero:has(a[href]):has(.buy) {
padding: 1em;
background: #FAA;
}

html:has(.about-page) {
background: hsl(50deg,15%,93%);
}
html
head
body class="about-page"
header
…
main
…
footer
…
html
head
body
header
…
main class="about-page"
…
footer
…

body:has(nav.subnav) header.page {
margin-block-end: 0;
}
html
head
body
header class="page"
nav class="subnav"
…
main
…
footer
…
html
head
body
header class="page"
…
nav class="subnav"
…
main
…
footer
…

.hero:has(a[href]):has(.buy) {
padding: 1em;
background: #FAA;
}
header class="hero"
h1
a href="…"
div
span class="buy"
span class="sale"
header class="hero"
h1
a href="…" class="buy"
div
span class="sale"

div:has(table.data) + div:has(h2, h3) {
margin-block-start: 25vh;
}
div:has(:not(img)) {
padding-inline: 0.5rem;
}
div:not(*:has(*:not(img))) {
border: 1px solid currentColor;
}

h4:has(+ blockquote) {
border-bottom:
1px solid orange;
}
h4:has(+ blockquote > p) {
border-width: 3px;
}

nav a:has(~ .current)::after {
content: " > ";
}

tbody:has(> tr:nth-child(7)) > tr:nth-child(odd) {
background: silver;
}
{ }
6
7

ul {
margin-block: 1em;
}
ul:not(:has(> li:nth-child(4))) {
margin-block: 2em;
}

ul:has(> li:nth-child(4)) {
margin-block: 1em;
}
ul {
margin-block: 2em;
}

.card:has(*:focus) {
outline: 3px solid red;
}
article:has(> *:target) {
outline: 3px solid red;
}

label:has(+ :required) {font-weight: bold;}
form:has(*:invalid) {background: #FAA;}
label:has(+ :required:invalid) {color: red;}

label:has(+ :required)::after {content: " *";}
<form>
<label
for="emailF">E-mail address
</label>
<input
id="emailF"
type="email"
placeholder="[email protected]"
required />
<label
for="phoneF">Phone number
</label>
<input
id="phoneF"
type="tel" />
label:has(+ :required) {font-weight: bold;}
label:has(+ :required:invalid) {color: red;}
form:has(*:invalid) {background: #FAA;}

a:has(> img) {
text-decoration: none;
}
<a href="…">
<img src="…" alt="Home" />
</a>
<a href="…">
Download <img src="…" alt="" />
</a>

a:has(b)
Performance
Power

Eric Meyer
Developer Advocate, Igalia
Co-founder, An Event Apart CSS :has()
Unlimited Power
Tags
css has chromium eyeo performance selectors
Categories
General
Download
Download Slideshow Get the original presentation file
Quick Actions
Statistics
  • Views 19
  • Slides 43
  • Age 270 days
Related Slideshows
Pray For The Peace Of Jerusalem and You Will Prosper 22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
Don_t_Waste_Your_Life_God.....powerpoint 26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf 31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
Fertility awareness methods for women in the society 14
Fertility awareness methods for women in the society
Isaiah47
29 views
Chapter 5 Arithmetic Functions Computer Organisation and Architecture 35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
syakira bhasa inggris (1) (1).pptx....... 5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views
View More in This Category