<article>
<figure>
<img src="https://assets.codepen.io/10558/flowers_700.jpg" alt="spring flowers">
</figure>
<figure>
<img src="https://assets.codepen.io/10558/mag_750x500.jpg" alt="black dog smiling in the sun">
<figcaption>Maggie loves being outside off-leash.</figcaption>
</figure>
<figure>
<figcaption>Using <code>:has()</code> can be easy.</figcaption>
<pre><code>
figure:has(pre) {
background: rgb(252, 232, 255);
border: 3px solid white;
padding: 1rem;
}
</code></pre>
</figure>
</article>
<small>This demo <a href="https://caniuse.com/css-has" target="_blank">requires a browser that supports <code>:has()</code></a>.</small>
figure {
margin: 0;
box-shadow: 1px 1px 4px rgba(1, 1, 1, 0.4);
}
figure:has(figcaption) {
/* if a figure has a figcaption,
apply this to the figure... */
background: white;
padding: 0.6rem;
}
figure:has(pre) {
/* if a figure has a pre,
apply this to the figure... */
background: rgb(252, 232, 255);
border: 3px solid white;
padding: 1rem;
}
figure:not(:has(:not(img))) {
/* if a figure does not have
any element that is not an image,
apply this to the figure... */
display: flex;
}
/* figure:has(img:only-child)
works too which is easier to understand, but doesn't show off :not */
figure:has(img) figcaption {
/* if a figure has an image,
apply this to its figcaption... */
font-size: 90%;
font-style: italic;
margin: 0.6rem 0 0.1rem;
}
figure figcaption {
font-family: georgia;
color: black;
}
figure:has(pre) figcaption {
/* if a figure has a pre,
apply this to its figcaption... */
margin: 0.6rem 0 0.1rem;
}
figure img {
max-width: 100%;
display: block;
object-fit: cover;
}
figure pre {
font-family: Courier New, monospace;
margin: 0;
color: rgb(159, 43, 148);
}
body {
background-color: #2a4a00;
background-color: color(display-p3 0.12 0.28 0.021);
}
article {
margin: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: calc(1rem + 2vw);
font-family: georgia;
}
/* Warning message
about support for :has() */
@supports selector(:has(img)) {
body small {
display: none;
}
}
small {
background: crimson;
color: white;
padding: 1rem;
display: block;
font-family: Helvetica;
font-weight: 600;
font-size: 1rem;
max-width: max-content;
margin-bottom: 2rem;
position: absolute;
top: 1rem;
left: 1rem;
}
small code {
font-family: courier;
font-size: 1.2rem;
background: rgba(255, 255, 255, 0.33);
}
small a {
color: white;
}
small a:hover {
color: rgba(255, 255, 255, 0.8);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.