:has() Demo #1 — Figure variations

has-demo-1-figure-variations.markdown

:has() Demo #1 — Figure variations

A Pen by Lukas on CodePen.

License.

index.html

<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(figcaption) {
  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>

style.css

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);
}