CSS :has() Unlimited Power

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

CSS1
CSS2
Simple selectors
Complex selectors

CSS1
CSS2
element, .class., #id
element, .class, #id,
[attr], 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

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

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>
</span>
</p>
<p>
<span>
<span>
</span>
</span>
</p>

p
a
p
span
a
p
span
span
a
p
img
p
span
p
img
span
span
img
img

p
img
p
span
p
img
span
span
img
img
p
a
p
span
a
p
span
span
a

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

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

div:has(> script) + *.advert
<div>
…
</script>
</div>
…
</iframe>

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

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

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

<body>
<div id="layout">
<main>
</main>
</div>
</body>
<div>
<div>
</div>
</div>
</div>
{display: none;}

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

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

<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>
<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
p class="price"
del
small
a href="…"
p class="sale"
p class="coupon"
div .sale

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

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

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

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

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

<div>
<h3>High-Quality Baseball Cap</h3>
<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>
<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>
<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
}

.gallery > div:has(.sale, .coupon) {
border-width: 4px;
}
.coupon
.sale .sale
.sale .coupon

border-width: 4px;
}
.gallery > div:has(.coupon) {
}
border-width: 4px;
}
.coupon
.sale .sale
.sale .coupon

<div>
<h3>
<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) {
border-width: 4px;
}
.gallery div:has(.coupon) {
}
border-width: 4px;
}
>
>
>

.coupon
.sale .sale
.sale .coupon
border-width: 4px;
}
.gallery div:has(.coupon) {
}
border-width: 4px;
}

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="you@example.com"
required />
<label
for="phoneF">Phone number
</label>
<input
id="phoneF"
type="tel" />
label:has(+ :required) {font-weight: bold;}
label:has(+ :required:invalid) {color: red;}

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

CSS :has() Unlimited Power

Recommended

More Related Content

Similar to CSS :has() Unlimited Power (20)

More from Igalia (20)

Recently uploaded (20)

CSS :has() Unlimited Power