davidbgk
/
larlet-fr-david-cache

title: CSS :has() Interactive Guide
url: https://ishadeed.com/article/css-has-guide/
hash_url: 02eaae467a3a88479393c9fe026f655a
archive_date: 2024-03-07
og_image: https://ishadeed.com/assets/css-has-guide/twitter-card.jpg
description: Everything you need to know about CSS :has() selector.
favicon: https://ishadeed.com/assets/favicon-32x32.png
language: en_US

<div class="post-content prose"> <h2 id="intro">Intro</h2>
<p>We always wanted a way in CSS to style an element based on its descendants. It wasn’t possible until CSS <code>:has()</code> became supported in all major browsers.</p>
<p>In this article, I will explore the problem and shed the light on some of the interesting use cases for CSS <code>:has()</code>.</p>
<h3 id="the-problem">The problem</h3>
<p>Say we have a <code>&lt;figure&gt;</code> and we want to style it differently if it has a <code>&lt;figcaption&gt;</code>. How to achieve that in CSS?</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumb.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">&gt;</span></span>A great looking tart.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>See the following demo. Try to toggle the “Show caption”.</p>
<astro-island uid="xNGJK" prefix="r1" component-url="/_astro/FigCaption.DS0PjoJ7.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"FigCaption","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_6w5nk_1"><div class="_sampleProse_6w5nk_10"><p>See the following figure:</p><figure class="_figure_6w5nk_21"><img src="/assets/css-has-guide/tart.jpeg" alt=""><figcaption>A great looking tart.</figcaption></figure></div></div></div></astro-island>
<p>When there is a caption, I want the figure to have the following:</p>
<ul>
<li>Padding</li>
<li>Background</li>
<li>Shadow</li>
</ul>
<p>The only possible way in CSS is to give a class to the <code>&lt;figure&gt;</code>, and then select the <code>&lt;figcaption&gt;</code> from that class.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">figure.with-caption</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 3px 10px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>This is not doable when we have generated HTML content (e.g: an article body).</p>
<h3 id="the-solution">The solution</h3>
<p>With the CSS <code>:has()</code> selector, this is possible. We can do the following. It’s like saying if the <code>&lt;figure&gt;</code> contains a <code>&lt;figcaption&gt;</code>, style it that way.</p>
<p>Can you guess the solution? Try to type it below and see the result in action. As a reminder, you need to type <code>:has</code> and the selector you want.</p>
<astro-island uid="Z2pLpWi" prefix="r2" component-url="/_astro/TestEdit.CN3ZTb5O.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"showCode":[0,true]}' ssr="" client="visible" opts='{"name":"TestEdit","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_10e1k_1"><p>Write the CSS selector needed to style the <strong>figure</strong> only if it has a <strong>figcaption</strong>.</p><div><div class="_demoInputWrapper_10e1k_18"><div><p><strong>.figure</strong><input class="_demoInput_10e1k_18" type="text" spellcheck="false">{</p><p>padding: 0.5rem; <br>background-color: #fff; <br>border-radius: 8px;</p><p>}</p></div></div><figure class="_figure_10e1k_61 false"><img src="/assets/css-has-guide/tart.jpeg" alt=""><figcaption>A great looking tart.</figcaption></figure></div><div class="_code_10e1k_96"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">figure</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">img</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">figcaption</span><span class="token tag punctuation">&gt;</span><span class="token plain">A great looking tart.</span><span class="token tag punctuation">&lt;/</span><span class="token tag">figcaption</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">figure</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<details><summary><p>Reveal the solution <span aria-hidden="true">👀</span></p></summary><pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">figure:has(figcaption)</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 3px 10px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></details>
<p>In the following demo, notice how when the <code>&lt;figcaption&gt;</code> is commented, the CSS <code>:has()</code> takes action.</p>
<astro-island uid="ZSbBRV" prefix="r3" component-url="/_astro/FigCaption.DS0PjoJ7.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"1"],"showCode":[0,true]}' ssr="" client="visible" opts='{"name":"FigCaption","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_6w5nk_1"><div class="_sampleProse_6w5nk_10"><p>See the following figure:</p><figure class="_figure_6w5nk_21"><img src="/assets/css-has-guide/tart.jpeg" alt=""><figcaption>A great looking tart.</figcaption></figure></div><div class="_code_6w5nk_66"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">figure</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">img</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">figcaption</span><span class="token tag punctuation">&gt;</span><span class="token plain">A great looking tart.</span><span class="token tag punctuation">&lt;/</span><span class="token tag">figcaption</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">figure</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<p>This is just scratching the surface of problems we can solve with CSS <code>:has()</code>.</p>
<h2 id="css-selectors-recap">CSS selectors recap</h2>
<p>Before diving into some interesting CSS selectors with <code>:has()</code>, let’s do a quick recap on them.</p>
<h3 id="adjacent-sibling-selector">Adjacent sibling selector</h3>
<p>To select the next sibling of an element, we can use the adjacent sibling selector (+) for that.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.frame + .book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Try it yourself in the demo below.</p>
<astro-island uid="ZkPcpy" prefix="r4" component-url="/_astro/SelectorsRecap.3Oha4ybT.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"adjacent"]}' ssr="" client="visible" opts='{"name":"SelectorsRecap$2","value":true}' await-children=""><div class="example-wrapper center _wrapper_s0lex_1"><p>Select the book that is next to the frame</p></div></astro-island>
<h3 id="general-sibling-selector">General sibling selector</h3>
<p>To select all the next siblings of an element, we can use the general sibling selector (~) for that.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.frame ~ .book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<astro-island uid="Z1qa8kO" prefix="r5" component-url="/_astro/SelectorsRecap.3Oha4ybT.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"general"]}' ssr="" client="visible" opts='{"name":"SelectorsRecap$2","value":true}' await-children=""><div class="example-wrapper center _wrapper_s0lex_1"><p>Select <strong>all the books</strong> that are after the frame</p></div></astro-island>
<h3 id="the-previous-sibling-selector">The previous sibling selector</h3>
<p>With CSS <code>:has()</code>, we can take the above further and select the previous sibling of an element.</p>
<p>In the following snippet, the <code>:has()</code> makes it possible to select a book that is followed by a frame.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.book:has(+ .frame)</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<astro-island uid="Zm5byI" prefix="r6" component-url="/_astro/SelectorsRecap.3Oha4ybT.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"previous"]}' ssr="" client="visible" opts='{"name":"SelectorsRecap$2","value":true}' await-children=""><div class="example-wrapper center _wrapper_s0lex_1"><p>Select <strong>the previous element</strong> before the frame.</p></div></astro-island>
<p>Adding on the above, we can select all of the <strong>previous elements</strong> of a specific element. In our case, we want to select all the <code>.book</code>s before the <code>.frame</code> element.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.book</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.book:has(~ .frame)</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<astro-island uid="26qPnJ" prefix="r7" component-url="/_astro/SelectorsRecap.3Oha4ybT.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"previousGeneral"]}' ssr="" client="visible" opts='{"name":"SelectorsRecap$2","value":true}' await-children=""><div class="example-wrapper center _wrapper_s0lex_1"><p>Select all the <code>.book</code> elements before the <code>.frame</code>.</p></div></astro-island>
<h3 id="the-child-combinator">The child combinator</h3>
<p>The <code>&gt;</code> selector selects an element if it’s the direct child only. For example, using <code>.section &gt; h1</code> will select an <code>&lt;h1&gt;</code> only if it’s a direct child of the section.</p>
<p>Review your knowledge with the demo below.</p>
<astro-island uid="ZjDfu7" prefix="r8" component-url="/_astro/SelectorsDirect.CE2P0PNM.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"SelectorsRecap","value":true}' await-children=""><div class="example-wrapper center _wrapper_1ntyn_1"><p>Select the <code>.book</code> that are inside the <code>.box</code></p></div></astro-island>
<h3 id="the-not-pseudo-class">The :not pseudo-class</h3>
<p>The <code>:not()</code> selector in CSS is useful to exclude an element from a selection. For example, <code>.section:not(.featured)</code>. Try the demo below and select all books except the <code>.blue</code> one.</p>
<astro-island uid="136n0v" prefix="r9" component-url="/_astro/SelectorsNot.O2ZEYcyg.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"SelectorsRecap$1","value":true}' await-children=""><div class="example-wrapper center _wrapper_12u5c_1"><p>Select all books except the <code>.blue</code></p></div></astro-island>
<p>That’s it for the selectors recap. It was important to set clear expectations and make sure that any upcoming example that explains them is clear to you.</p>
<h2 id="css-has-selectors-matching">CSS :has() selectors matching</h2>
<p>Learning to read a CSS <code>:has()</code> selector is useful. In this section, I will go through a few examples and show you how to analyze them.</p>
<p>The following are general examples for you to practise.</p>
<h3 id="card-with-image">Card with image</h3>
<p>In this example, we have a card with an image as a child element. We can check that with CSS <code>:has()</code>.</p>
<p>Try to toggle the checkbox and see how the CSS selector works only when there is an image.</p>
<astro-island uid="D7IG" prefix="r10" component-url="/_astro/Card.Bh0yW6fM.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"card-img"]}' ssr="" client="visible" opts='{"name":"CardAnalyse","value":true}' await-children=""><div class="example-wrapper center _wrapper_100uz_1"><div class="_innerContent_100uz_13"><div><p class="_explain_100uz_20">select all <strong>.card</strong> that contain an <strong>img</strong></p><p class="_arrow_100uz_32"></p></div><div><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card-content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<p>What if we want a selector that should match only <strong>if the image is a direct child</strong> of the card? When the <code>.card-thumb</code> element is there, it won’t match.</p>
<p>Try it yourself.</p>
<astro-island uid="ZAqYGx" prefix="r11" component-url="/_astro/Card.Bh0yW6fM.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"card-direct-img"]}' ssr="" client="visible" opts='{"name":"CardAnalyse","value":true}' await-children=""><div class="example-wrapper center _wrapper_100uz_1"><div class="_innerContent_100uz_13"><div><p class="_explain_100uz_20">select all <strong>.card</strong> that contain a direct<strong> img</strong> child</p><p class="_arrow_100uz_32"></p></div><div><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card-thumb</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">img</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card-content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h3 id="card-without-an-image">Card without an image</h3>
<p>CSS <code>:has()</code> can be combined with the <code>:not()</code> selector. In this case, the card selector will match <strong>only if it doesn’t have an image</strong>.</p>
<astro-island uid="MMWh9" prefix="r12" component-url="/_astro/Card.Bh0yW6fM.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"no-img"]}' ssr="" client="visible" opts='{"name":"CardAnalyse","value":true}' await-children=""><div class="example-wrapper center _wrapper_100uz_1"><div class="_innerContent_100uz_13"><div><p class="_explain_100uz_20">select all <strong>.card</strong> that <strong>doesn't</strong> contain an <strong>img</strong></p><p class="_arrow_100uz_32"></p></div><div><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">img</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card-content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h3 id="adjacent-sibling-and-has">Adjacent sibling and :has</h3>
<p>See the following demo. We want to select the <code>.shelf</code> that contains the frame that is followed by a purple book.</p>
<p>By default, the frame comes after the book. Toggle the checkbox and see how the CSS <code>:has()</code> selector will work.</p>
<astro-island uid="2sWq5h" prefix="r13" component-url="/_astro/ElementFollowedBy2.DOsNK8yE.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy2$4","value":true}' await-children=""><div class="example-wrapper center _wrapper_6sh2w_1"><p class="_checkbox_4pedb_1 _mainColor_4pedb_4"><input id=":r13R1:" type="checkbox" class="_srOnly_4pedb_43 _input_4pedb_8"><label class="_label_4pedb_26" for=":r13R1:">Reorder book</label></p><div><p class="_explain_6sh2w_146">Select the <strong>shelf</strong> with a<strong> frame</strong> followed by a <strong>purple book</strong></p><p class="_arrow_6sh2w_122"></p><p class="_code_6sh2w_114">.shelf:has(.frame + .book-purple)</p></div></div></astro-island>
<h3 id="select-a-shelf-if-it-only-contains-a-box">Select a shelf if it only contains a box</h3>
<p>In this example, the CSS <code>:has()</code> selector tries to match if there are books inside the box container only.</p>
<astro-island uid="Z1POSdh" prefix="r14" component-url="/_astro/ShelfBox.CbGVwB2-.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy2$3","value":true}' await-children=""><div class="example-wrapper center _wrapper_3yj15_1"><p class="_checkbox_4pedb_1 _mainColor_4pedb_4"><input id=":r14R1:" type="checkbox" class="_srOnly_4pedb_43 _input_4pedb_8"><label class="_label_4pedb_26" for=":r14R1:">Reorder book</label></p><div><p class="_explain_3yj15_181">Select the <strong>shelf</strong> that has a container of books</p><p class="_arrow_3yj15_157"></p></div></div></astro-island>
<h3 id="select-a-box-without-a-blue-book">Select a box without a blue book</h3>
<p>Combining <code>:has()</code> and <code>:not()</code> is one of the many possible things to do in CSS <code>:has()</code>. In this example, the selector will match only if the box <strong>doesn’t have a blue book</strong>.</p>
<astro-island uid="2bFOkl" prefix="r15" component-url="/_astro/ShelfBox2.MkLtBXHq.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy2$2","value":true}' await-children=""><div class="example-wrapper center _wrapper_urqi1_1"><p class="_checkbox_4pedb_1 _mainColor_4pedb_4"><input id=":r15R1:" type="checkbox" class="_srOnly_4pedb_43 _input_4pedb_8"><label class="_label_4pedb_26" for=":r15R1:">Remove blue book</label></p><div><p class="_explain_urqi1_180">Select the <strong>box</strong> that <strong>doesn't</strong> have a blue book</p><p class="_arrow_urqi1_156"></p></div></div></astro-island>
<h3 id="select-the-box-with-3-books">Select the box with 3+ books</h3>
<astro-island uid="Z1rz3U5" prefix="r16" component-url="/_astro/ShelfBox3.DPHxAJJs.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy2$1","value":true}' await-children=""><div class="example-wrapper center _wrapper_e5jbw_1"><p class="_checkbox_4pedb_1 _mainColor_4pedb_4"><input id=":r16R1:" type="checkbox" class="_srOnly_4pedb_43 _input_4pedb_8"><label class="_label_4pedb_26" for=":r16R1:">Add book</label></p><div><p class="_explain_e5jbw_157">Select the <strong>.box</strong> with 3+ books</p><p class="_arrow_e5jbw_133"></p><div class="_code_e5jbw_125"><span>.box:has(.book:nth-last-child(n + 3))</span></div></div></div></astro-island>
<h3 id="change-the-book-order-based-on-the-number">Change the book order based on the number</h3>
<p>An interesting way is to change the book ordering from stacked to stand-up based on their number. In the following demo, if the number of books is 5+, they will change to a standing-up order.</p>
<p>Try to add more books and see what happens.</p>
<astro-island uid="Z1VMFF1" prefix="r17" component-url="/_astro/ShelfBox4.EuBXAB9S.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy2","value":true}' await-children=""><div class="example-wrapper center _wrapper_e5jbw_1 _booksOrder_e5jbw_7 "><p class="demoActions"><button class="button button--add">Add</button><button class="button button-remove" disabled>Remove</button><button class="button button--reset">Reset</button></p><div><p class="_explain_e5jbw_157">Change books from <strong>stacking to standing</strong> if 5+</p><p class="_arrow_e5jbw_133"></p><div class="_code_e5jbw_125"><div><span>.shelf:has(.book:nth-last-child(n + 5))</span> <p> {</p><div><p>flex-direction: row;</p><div><p>.book  {</p><div><p>height: 100%;</p><p>width: 22px;</p></div><p>}</p></div></div><p>}</p></div></div></div></div></astro-island>
<p>By using the <code>:nth-last-child()</code>, this is possible.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.shelf:has(.book:nth-last-child(n + 5))</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>

  <span class="token selector">.book</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="add-spacing-to-each-3rd-items-if-5-books">Add spacing to each 3rd items if 5+ books</h3>
<p>This is the same previous example, but we took it further. If the number of items is 5+ books, we need to add a space <strong>to each 3rd item</strong> for better shelf organization.</p>
<astro-island uid="ZzB9PJ" prefix="r18" component-url="/_astro/ShelfBox4.EuBXAB9S.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"count":[0,5],"spacing":[0,true]}' ssr="" client="visible" opts='{"name":"ElementFollowedBy2","value":true}' await-children=""><div class="example-wrapper center _wrapper_e5jbw_1 _booksOrder_e5jbw_7 "><p class="demoActions"><button class="button button--add">Add</button><button class="button button-remove">Remove</button><button class="button button--reset">Reset</button></p><div><p class="_explain_e5jbw_157">Add spacing to each 3rd item if 5+ books</p><p class="_arrow_e5jbw_133"></p><div class="_code_e5jbw_125"><div><span>.shelf:has(.book:nth-last-child(n + 5))</span> <p> {</p><p>}</p></div></div></div></div></astro-island>
<h3 id="the-bookshelf">The bookshelf</h3>
<p>A fun example where I have the following conditions with CSS <code>:has()</code>:</p>
<ul>
<li>Change the books from stack to stand based on their number</li>
<li>Hang the frame to the wall if certain number of books is there</li>
<li>Throw the plant and earth on the ground</li>
</ul>
<p>Play with the demo.</p>
<astro-island uid="1pgzNT" prefix="r19" component-url="/_astro/BookShelf.6cORX75g.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"BookShelf","value":true}' await-children=""></astro-island>
<h4 id="change-books-ordering">Change books ordering</h4>
<p>The first thing is that I want to change the books from stack to stand, if there are 5+ books.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.shelf:has(.book:nth-last-of-type(n + 5))</span> <span class="token punctuation">{</span>
  
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>

  <span class="token selector">.book</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h4 id="hang-the-frame-to-the-wall">Hang the frame to the wall</h4>
<p>If there 6+ books, the frame should be moved to the wall.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.shelf:has(.book:nth-last-of-type(n + 6))</span> <span class="token punctuation">{</span>
  <span class="token selector">.frame</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50% - <span class="token punctuation">(</span>75px / 2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token property">top</span><span class="token punctuation">:</span> -165%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h4 id="throw-the-plant-and-earth">Throw the plant and earth</h4>
<p>No space at all? Simple, throw the plant and earth to the ground, but I’m not responsible for any mess.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.shelf:has(.book:nth-last-of-type(n + 9))</span> <span class="token punctuation">{</span>
  <span class="token selector">.plant</span> <span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> movePlant 0.6s forwards<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.earth</span> <span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> moveEarth 0.6s forwards<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="logical-operators-with-css-has">Logical operators with CSS :has</h3>
<p>With CSS <code>:has()</code>, we can replicate the logical operators like ”&amp;&amp;” and ”||“. In the following demo, we have the conditions:</p>
<ul>
<li>Select the shelf if it contains the purple <strong>and</strong> yellow book.</li>
<li>Select the shelf if it contains the purple <strong>or</strong> the yellow book.</li>
</ul>
<p>Try the following:</p>
<ul>
<li>Toggle the books on or off</li>
<li>Change the option in the menu between “and” / “or”</li>
</ul>
<astro-island uid="21WFsG" prefix="r20" component-url="/_astro/ShelfOrAnd.BCTmdOx6.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ShelfOrAnd$1","value":true}' await-children=""><div class="example-wrapper center _wrapper_1d5r1_1"><div><p class="_explain_1d5r1_139">Select the shelf that has the <strong>purple</strong> book <select name="logicalOperator" id="logicalOperator"><option value="and" selected>and</option><option value="or">or</option></select>the <strong>yellow</strong> book</p><p class="_arrow_1d5r1_115"></p><div class="_code_1d5r1_107"><div><span>.shelf:has(.book-purple):has(.book-yellow)</span> <p> {</p><p>outline: dashed 2px deeppink;</p><p>}</p></div></div></div></div></astro-island>
<p>In CSS, here is what’s happening:</p>
<pre class="language-css"><code is:raw="" class="language-css">
<span class="token selector">.shelf:has(.bookPurple, .bookYellow)</span> <span class="token punctuation">{</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> dashed 2px deeppink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token selector">.shelf:has(.bookPurple):has(.bookYellow)</span> <span class="token punctuation">{</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> dashed 2px deeppink<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>It’s amazing what we can do with logical operators in CSS <code>:has()</code>.</p>
<p>I hope that you learned how the CSS <code>:has()</code> works. Now, let’s move into interesting use cases for CSS <code>:has()</code>.</p>
<h2 id="use-cases-for-css-has">Use cases for CSS :has</h2>
<h3 id="file-download">File download</h3>
<p>This is one of my favorite use cases in this article. Say we have a file component that shows the following:</p>
<ul>
<li>File image</li>
<li>Name</li>
<li>Meta info (pages, size, etc)</li>
</ul>
<p>If there is no image for the file, we want to check the file extension and change the icon. We can do that with <code>:has()</code>.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.file:not(:has(img)) .thumb:before</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">,</span> initial<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.file:has([href$=".pdf"])</span> <span class="token punctuation">{</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token string">"icon-pdf.png"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre>
<p>Try to toggle the image, then change the file type and see what happens. This is magic, isn’t it?</p>
<astro-island uid="XYVDc" prefix="r21" component-url="/_astro/FileDownload.DkLT1KdO.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"FileDownload","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_207mc_1"><div class="_code_207mc_63"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">file</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">file.docx</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>

<p>What if we have a sidebar and need to increase its width if it contains a widget? This is possible with CSS :has.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.layout</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> max-content 1fr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.sidebar:has(.widget)</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Try it in the interactive demo. I recommend to view this on a large screen.</p>
<astro-island uid="1sVt7" prefix="r22" component-url="/_astro/SidebarWidth.h7JOmyL_.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"SidebarWidth$2","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_17qqr_1 "><div class="_page_17qqr_10"><div><p>Please fill the following:</p></div></div><div class="_code_17qqr_49"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">page</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">sidebar</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">h2</span><span class="token tag punctuation">&gt;</span><span class="token plain">Selected period</span><span class="token tag punctuation">&lt;/</span><span class="token tag">h2</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">widget</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">main</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h3 id="cookies-banner">Cookies Banner</h3>
<p>This is a common layout issue that I see a lot. Say you have an Intercom widget, and a cookies banner. How the UI will react?</p>
<p>Toggle the banner in the demo below. Notice how the widget is hidden under the banner. This isn’t good.</p>
<astro-island uid="Z1pYES7" prefix="r23" component-url="/_astro/CookiesBanner.WIZzp-jB.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"SidebarWidth$1","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1mmo4_1 false"><p>CSS is awesome. Isn't it?</p><p class="_fab_1mmo4_11"></p></div></div></astro-island>
<p>We can use CSS <code>:has()</code> to move the widget <strong>if the banner is shown</strong>.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">body:has(.banner) .fab</span> <span class="token punctuation">{</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 6rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Play with the demo and toggle the CSS <code>:has()</code> checkbox.</p>
<astro-island uid="21jY1k" prefix="r24" component-url="/_astro/CookiesBanner.WIZzp-jB.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"SidebarWidth$1","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1mmo4_1 false"><p>CSS is awesome. Isn't it?</p><p class="_fab_1mmo4_11"></p></div></div></astro-island>
<h3 id="dashboard-banner">Dashboard banner</h3>
<p>In this example, I want to show an additional visual clue if the page has an alert.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.main:has(.alert) .header</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span>
    inset 0 2px 0 0 red<span class="token punctuation">,</span>
    0 3px 10px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff4f4<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Toggle the alert and what happens.</p>
<astro-island uid="1Cv1oD" prefix="r25" component-url="/_astro/DashboardBanner.DCdYFunL.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"SidebarWidth","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_18ys2_1 false"><div class="_parent_18ys2_12"><div class="_main_18ys2_34"><div class="_alert_18ys2_47"><svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m98.715 83.008l-43.457-70.844c-2.8906-4.7227-7.625-4.6562-10.516 0.066407l-43.457 70.746c-2.8906 4.7227-0.73047 8.3711 4.8008 8.3711h87.824c5.5352 0 7.6953-3.625 4.8047-8.3398zm-48.75-55.164c2.7812 0 4.9375 3.0742 4.793 6.832l-0.88281 22.641c-0.14062 3.7539-1.9102 6.8281-3.9219 6.8281-2.0156 0-3.7852-3.0742-3.9258-6.8281l-0.87109-22.641c-0.14062-3.7578 2.0195-6.832 4.8086-6.832zm0 53.355c-3.5117 0-5.9219-2.5664-5.8477-6.0742 0-3.5859 2.4141-6.0742 5.8477-6.0742 3.5781 0 5.8398 2.4922 5.918 6.0742-0.003906 3.5078-2.3398 6.0742-5.918 6.0742z"></path></svg><p>Something is wrong. Please fix here!</p></div></div></div></div></div></astro-island>
<h3 id="quantity-queries-with-css-has">Quantity queries with CSS :has</h3>
<p>I first learned about quantity queries via <a href="https://alistapart.com/article/quantity-queries-for-css/">this article</a> by Heydon Pickering on A List Apart. The good thing is that we can use them with CSS <code>:has()</code>.</p>
<p>The idea is to use the CSS <code>:nth-last-child</code> like this:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">li:nth-last-child(n + 5),
li:nth-last-child(n + 5) ~ li</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direciton</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>This will select all <code>&lt;li&gt;</code>s if there are 5 or more. The problem is that it’s limited to the child elements only. We can’t select the parent.</p>
<p>With CSS <code>:has()</code>, this is possible.</p>
<p>Here is an example:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">--item-size</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>
    auto-fit<span class="token punctuation">,</span>
    <span class="token function">minmax</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--item-size<span class="token punctuation">)</span><span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.wrapper:has(li:nth-last-child(n + 5))</span> <span class="token punctuation">{</span>
  <span class="token property">--item-size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>I used a CSS variable to represent the item width in the <code>minmax()</code> function. Let’s play with that in CSS <code>:has()</code>.</p>
<p>See the interactive demo below. Here is what’s happening:</p>
<ul>
<li>There is a quantity query with CSS <code>:has()</code>. I have 3 of them.</li>
<li>When the number of items changes, the matching query will work.</li>
</ul>
<astro-island uid="Z2phmPM" prefix="r26" component-url="/_astro/QuantityQueries.BywiYCjI.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ShelfOrAnd","value":true}' await-children=""><div class="example-wrapper center _wrapper_1lzv4_1"><p class="_demoActions_1lzv4_52"><button class="button button--add">Add</button><button class="button button-remove" disabled>Remove</button><button class="button button--reset">Reset</button></p><div><div class="_code_1lzv4_10"><div><span>.wrapper:has(li:nth-last-child(<strong>n + 3</strong>))</span><p> {</p><p>--item-size: 220px;</p><p>}</p></div><div><span>.wrapper:has(li:nth-last-child(<strong>n + 6</strong>))</span><p> {</p><p>--item-size: 170px;</p><p>}</p></div><div><span>.wrapper:has(li:nth-last-child(<strong>n + 9</strong>))</span><p> {</p><p>--item-size: 130px;</p><p>}</p></div></div></div></div></astro-island>
<h3 id="select-title-that-comes-after-a-link">Select title that comes after a link</h3>
<p>We can select an element if it’s followed by another. In this example, I want to select the <code>&lt;a&gt;</code> only if it’s followed by <code>&lt;h3&gt;</code>.</p>
<p>Without CSS <code>:has()</code>, we’re limited to the following only:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.prose a + h3</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<p>With CSS <code>:has()</code>, we can straightforwardly do that.</p>
<pre class="language-css"><code is:raw="" class="language-css">
<span class="token selector">a:has(+ h3)</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
  
<span class="token punctuation">}</span></code></pre>
<p>Play with the interactive demo below.</p>
<astro-island uid="Z1ytRmk" prefix="r27" component-url="/_astro/ElementFollowedBy.DkOn4VO8.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ElementFollowedBy","value":true}' await-children=""><div class="example-wrapper center _wrapper_1uclk_1"><div class="_innerContent_1uclk_13"><div><p class="_explain_1uclk_20">select all <strong>a</strong> that have<strong> h3</strong> directly after it</p><p class="_arrow_1uclk_32"></p></div><div class="_liveExample_1uclk_56"><div><p class="_tag_1uclk_106">HTML</p><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">prose</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">h2</span><span class="token tag"> </span><span class="token tag punctuation">&gt;</span><span class="token plain">Main heading</span><span class="token tag punctuation">&lt;/</span><span class="token tag">h2</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">Description text</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Read more here</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">CSS is awesome.</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">h3</span><span class="token tag punctuation">&gt;</span><span class="token plain">Sub title in here</span><span class="token tag punctuation">&lt;/</span><span class="token tag">h3</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div><div class="_sample_1uclk_75"><p class="_tag_1uclk_106">Result</p><h2 aria-hidden="true">Main heading</h2><p>Description text</p><a href="#">Read more here</a><p>CSS is awesome.</p><h3 aria-hidden="true">[h3] Sub title in here</h3></div></div></div></div></astro-island>
<h3 id="card-with-a-disabled-button">Card with a disabled button</h3>
<p>In this example, we have a product card with a stock element. When the stock element has the class of <code>.out-of-stock</code>, we want to change the card style.</p>
<p>We can hide the “add to cart” button, or show a “Notify me when available”. Whatever works best for your case.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card:has(.out-of-stock) .button</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<astro-island uid="kODDX" prefix="r28" component-url="/_astro/CardDisabled.Do4Ehjqk.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"1"]}' ssr="" client="visible" opts='{"name":"CardDisabled","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1eq8w_1"><p>Toggle the checkbox.</p><article class="_card_1eq8w_10"><img src="/assets/css-has-guide/tart.jpeg" alt=""><div><h3>The Barista Pro</h3><p>Be a barista at home.</p><p class="false">5 items left</p><a href="#" class="_button_1eq8w_40">Add to cart</a></div></article></div></div></astro-island>
<p>Another option for the same case is to add a tag at the top of the product card. Those are purely design decisions and the demo just showcases one of the many possible solutions.</p>
<pre class="language-scss"><code is:raw="" class="language-scss"><span class="token selector">.card </span><span class="token punctuation">{</span>
  &amp;<span class="token punctuation">:</span><span class="token function">has</span><span class="token punctuation">(</span>.outOfStock<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

    <span class="token selector"><span class="token parent important">&amp;</span>:after </span><span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Not available"</span><span class="token punctuation">;</span>
      <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token property">inset-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255 0 0 <span class="token operator">/</span> 76%<span class="token punctuation">)</span><span class="token punctuation">;</span>
      
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Try to toggle “out of stock” and see what happens.</p>
<astro-island uid="Z26mAbr" prefix="r29" component-url="/_astro/CardDisabled.Do4Ehjqk.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"2"]}' ssr="" client="visible" opts='{"name":"CardDisabled","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1eq8w_1"><p>Toggle the checkbox.</p><article class="_card_1eq8w_10 _card2_1eq8w_44"><img src="/assets/css-has-guide/tart.jpeg" alt=""><div><h3>The Barista Pro</h3><p>Be a barista at home.</p><p class="false">5 items left</p></div></article></div></div></astro-island>
<h3 id="card-with-hovered-button">Card with hovered button</h3>
<p>We can add a hover effect to a card if a button is hovered.</p>
<p>Try to hover on the button and see how the card shadow changes. This is all with CSS <code>:has()</code>.</p>
<astro-island uid="Z28aJ7i" prefix="r30" component-url="/_astro/CardDisabled.Do4Ehjqk.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"3"]}' ssr="" client="visible" opts='{"name":"CardDisabled","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1eq8w_1"><article class="_card_1eq8w_10 _card3_1eq8w_86 null"><img src="/assets/css-has-guide/tart.jpeg" alt=""></article><p>Try to hover on the button</p></div></div></astro-island>
<p>For me, this is like <code>:focus-within</code>. Maybe I should call it <code>:hover-within</code>?</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card:has(.button:hover)</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span>
    0 2px 4px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">,</span>
    0 3px 25px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Toggle the 2nd style and see a different styling option. This is all done with CSS <code>:has()</code>.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;:has(.button:hover)</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span>
      0 0 0 7px <span class="token function">var</span><span class="token punctuation">(</span>--brand-1<span class="token punctuation">)</span><span class="token punctuation">,</span>
      0 2px 20px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">,</span>
      0 3px 45px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>#000<span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token selector">.button</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">h3,
    p</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="modal">Modal</h3>
<p>In a modal, we might need to change the title color if it’s about a critical action, like deleting something important.</p>
<p>See the following demo. We have a modal with action buttons.</p>
<astro-island uid="Z1CvVTT" prefix="r31" component-url="/_astro/Modal.Bm56Jn-T.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Modal$3","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_sk8rm_1 undefined"><div class="_modal_sk8rm_11"><div class="_modalContent_sk8rm_65"><p>Are you sure you want to save the changes?</p><p>This cannot be undone.</p></div></div></div></div></astro-island>
<p>What I want is that when there is a <code>.btn--danger</code> class, the modal title should be red. Normally, we’ll need to add a class like this to the modal header:</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal modal--danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Edit project<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>And then style it like so:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.modal--danger h2</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>With CSS <code>:has()</code>, all we need to do is the following:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.modal</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;:has(.btn--danger)</span> <span class="token punctuation">{</span>
    <span class="token selector">.modal-title</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>See the interactive demo.</p>
<astro-island uid="ZKyWBJ" prefix="r32" component-url="/_astro/Modal.Bm56Jn-T.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"interactive":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$3","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_sk8rm_1 _interactive_sk8rm_7"><div class="_modal_sk8rm_11"><div class="_modalContent_sk8rm_65"><p>Are you sure you want to save the changes?</p><p>This cannot be undone.</p></div></div></div></div></astro-island>
<h3 id="modal-buttons">Modal buttons</h3>
<p>In this example, we have a modal with multiple action buttons. The problem here is that we want to change the layout based on the number of buttons.</p>
<p>Try to toggle the checkbox and see what happens.</p>
<astro-island uid="1iExxb" prefix="r33" component-url="/_astro/Modal2.C8DdRMqa.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"interactive":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$2","value":true}' await-children=""></astro-island>
<p>Notice how the layout changed? This happened with CSS <code>:has()</code> only. It’s wild of what we can do with it!</p>
<p>See the following HTML.</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modal-actions<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn--secondary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn--ter<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Save draft<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn--primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>In CSS, we need to check if the number of buttons is three. If yes:</p>
<ul>
<li>position the last one on the far right</li>
<li>change <code>justify-content</code> to <code>stretch</code></li>
</ul>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.modal-actions</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>

  <span class="token selector">&amp;:has(.btn:nth-last-child(n + 3))</span> <span class="token punctuation">{</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>

    <span class="token selector">.btn:last-child</span> <span class="token punctuation">{</span>
      <span class="token property">margin-inline-start</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>We can even go further and make more styling changes. For example:</p>
<ul>
<li>Change the background color</li>
<li>Add a border</li>
<li>Add padding</li>
<li>Reset paddings with negative margins (kind of a hack)</li>
</ul>
<astro-island uid="2dKyYd" prefix="r34" component-url="/_astro/Modal2.C8DdRMqa.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"interactive":[0,true],"style2":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$2","value":true}' await-children=""></astro-island>
<p>Here is the CSS:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.modal-actions</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;:has(.btn:nth-last-child(n + 3))</span> <span class="token punctuation">{</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #d3d3d3<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #f5f5f5<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span>
    <span class="token property">margin-inline</span><span class="token punctuation">:</span> -1rem<span class="token punctuation">;</span>
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> -1rem<span class="token punctuation">;</span>

    <span class="token selector">.btn:last-child</span> <span class="token punctuation">{</span>
      <span class="token property">margin-inline-start</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="section-empty-state">Section empty state</h3>
<p>In this example, CSS <code>:has()</code> is used to detect if a section contains an element with empty content. If yes, then the layout will change.</p>
<p>Before CSS <code>:has()</code>, this needed to be done in Javascript. Now, with CSS <code>:has()</code> help, we can reduce the Javascript needed significantly.</p>
<p>Here is the section with the content.</p>
<astro-island uid="ZklAV1" prefix="r35" component-url="/_astro/SectionEmpty.CR93UmMt.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"default":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$1","value":true}' await-children=""></astro-island>
<p>When there is no content, it should look like this:</p>
<astro-island uid="Z275cRA" prefix="r36" component-url="/_astro/SectionEmpty.CR93UmMt.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"empty":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$1","value":true}' await-children=""></astro-island>
<p>We can check the <code>:empty</code> pseudo-class on the parent and do the styles we need.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.section:has(.sectionContent:empty)</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<p>Here is the complete CSS:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.section:has(.sectionContent:empty)</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>

  <span class="token selector">.sectionHeader</span> <span class="token punctuation">{</span>
    <span class="token selector">p:first-child</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
      <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
      <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
      <span class="token property">gap</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>

      <span class="token selector">&amp;:before</span> <span class="token punctuation">{</span>
        <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
        <span class="token property">--size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token selector">p:last-child</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Play with the demo below.</p>
<astro-island uid="Z2ta7L1" prefix="r37" component-url="/_astro/SectionEmpty.CR93UmMt.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"interactive":[0,true]}' ssr="" client="visible" opts='{"name":"Modal$1","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_tkj3d_1 _interactive_tkj3d_8"><div><div><span>.section:has(.sectionContent:empty)</span> <p> {</p><p>outline: dashed 2px deeppink;</p><p>}</p></div></div></div></div></astro-island>
<h3 id="input-states">Input states</h3>
<p>With CSS <code>:has()</code>, we can check the input state like a checkbox, radio button or <code>&lt;select&gt;</code> menus. There are some interesting use cases when mixing <code>:has()</code> with input states.</p>
<h4 id="checkbox-and-css-has">Checkbox and CSS :has</h4>
<p>We can check the value of a checkbox and do something as a result of it. See the following demo:</p>
<p>If the checkbox is checked, the button will be enabled.</p>
<astro-island uid="ZFqPcQ" prefix="r38" component-url="/_astro/InputStates.B_nBqO_a.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"checkbox"]}' ssr="" client="visible" opts='{"name":"InputStates","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_y6q5u_2 _wrapper1_y6q5u_7"><p><span aria-hidden="true">💡</span> Try to hover on the box or the button.</p><div><span><span><span data-name="box">.box</span>:has(input[type="checkbox"]:checked)</span></span> <p> {</p><div><div><p>.btn {</p><div><p>opacity: 1;</p><p>pointer-events: initial;</p></div><p>}</p></div></div><p>}</p></div><div data-name="box" class="_box_y6q5u_45 undefined"><div><p class="_title_y6q5u_62">Terms and conditions</p><p class="_desc_y6q5u_66">Before moving to the next step, please make sure you agree with our terms of services.</p></div><p><input type="checkbox" id=":"><label for=":">I accept the terms and conditions</label></p><a href="#" class="_btn_y6q5u_54 _btnPrimary_y6q5u_166">Next</a></div></div></div></astro-island>
<p>It’s like an if statement in Javascript, or a React state. Interesting, right?</p>
<h4 id="radio-button-and-css-has">Radio button and CSS :has</h4>
<p>What if we want to change the CSS based on the selected radio button? This is also possible. In the following example, a note will be displayed if the user picks “standard shipping”.</p>
<p>See the following demo:</p>
<astro-island uid="ZiFbx1" prefix="r39" component-url="/_astro/InputStates.B_nBqO_a.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"radio"]}' ssr="" client="visible" opts='{"name":"InputStates","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_y6q5u_2 _wrapper2_y6q5u_15"><p><span aria-hidden="true">💡</span> Try to hover on the box or the button.</p><div><span><span><span data-name="box">.box</span>:has(input[value="standard"]:checked)</span></span> <p> {</p><p>}</p></div></div></div></astro-island>
<h3 id="select-menu-and-css-has">Select menu and CSS :has</h3>
<p>We can also check the currently selected option of a <code>&lt;select&gt;</code>. One common example is to display an input field conditionally.</p>
<p>For example, if the user selects “other”, we want to show input to let them fill in more info.</p>
<astro-island uid="28yjIh" prefix="r40" component-url="/_astro/InputStates.B_nBqO_a.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"select"]}' ssr="" client="visible" opts='{"name":"InputStates","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_y6q5u_2 _wrapper3_y6q5u_23"><div><span><span><span data-name="box">.box</span>:has(option[value="2"]:checked)</span></span> <p> {</p><p>}</p></div><div data-name="box" class="_box_y6q5u_45 _box3_y6q5u_87"><div><p class="_title_y6q5u_62">Tell us a bit about you</p><p class="_desc_y6q5u_66">Pick a delivery option.</p></div><p><label for="0">What do you prefer?</label><select id="0"><option value="1">Default</option><option value="2">Medium</option><option value="3">Other</option></select></p><p class="_other_y6q5u_87"><label for="">Other</label><input type="text" name="" id=""></p><a href="#" class="_btn_y6q5u_54 _btnPrimary_y6q5u_166">Next</a></div></div></div></astro-island>
<h3 id="html-attributes">HTML attributes</h3>
<h4 id="disabled-attribute">Disabled attribute</h4>
<p>If a button has the <code>disabled</code> attribute, we can show additional information to let the user understand that something is missing.</p>
<astro-island uid="Z1a2AxX" prefix="r41" component-url="/_astro/InputStates.B_nBqO_a.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"disabled"]}' ssr="" client="visible" opts='{"name":"InputStates","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_y6q5u_2 _wrapper4_y6q5u_34"><div><span><span><span data-name="disabled">.box</span>:has(button[disabled])</span></span> <p> {</p><p>}</p></div><div data-name="disabled" class="_box_y6q5u_45 _box4_y6q5u_98"><div><p class="_title_y6q5u_62">Create a new profile</p><p class="_desc_y6q5u_66 _desc1_y6q5u_123">Pick a delivery option.</p><p class="_desc_y6q5u_66 _desc2_y6q5u_126">Before creating a profile, you must verify your account first. Kindly check your email.</p></div><div><button class="_btn_y6q5u_54 _btnPrimary_y6q5u_166">Continue</button><p class="_note_y6q5u_77">You cannot create a profile.</p></div></div></div></div></astro-island>
<p>This example is inspired by this <a href="https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/">Great article</a> by Vitaly Friedman on Smashing Magazine.</p>
<h4 id="dual-hover-with-data-attributes-and-has">Dual hover with data attributes and :has</h4>
<p>By combining data attributes and CSS <code>:has()</code>, we can create a really interesting effect. You can trigger an item by hovering on another and they don’t need to be in the same parent.</p>
<p>I first saw this by <a href="https://twitter.com/pomber/status/1739617079404134821">Rodrigo Pombo</a> and I was like 😱.</p>
<p>The idea is to add a data attribute for two elements or more, and then use <code>:has()</code> to know when one of the items is hovered and trigger other items with the same data attribute.</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tags<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>design<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Design<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>design<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.wrapper:has([data-name="css"]:hover) [data-name="css"]</span> <span class="token punctuation">{</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> 2px solid<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>See the following demo:</p>
<astro-island uid="N3O4F" prefix="r53" component-url="/_astro/HTMLAttr.C-i5Z4NH.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props='{"variation":[0,"data-attr"]}' ssr="" client="visible" opts='{"name":"HTMLAttr$1","value":true}' await-children=""></astro-island>
<h4 id="dual-hover-example">Dual hover example</h4>
<p>Say we have a widget that contains a sample of my work. I want to have links to each and at the same time to connect the items to images. We can add the images as pseudo-elements, but that is a hack.</p>
<p>With CSS <code>:has()</code>, we can have the images in a separate element and add a shared data attribute for each link and image.</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>work<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    I wrote a book on
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>book<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://debuggingcss.com/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      Debugging CSS <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span>
    <span class="token punctuation">&gt;</span></span>.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>book<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>book.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>Try to hover on one of the links.</p>
<astro-island uid="1sztng" prefix="r54" component-url="/_astro/HoverSync.BSxqdfai.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"HTMLAttr","value":true}' await-children=""></astro-island>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.work:has(a[data-name="book"]:hover)</span> <span class="token punctuation">{</span>
  <span class="token selector">img[data-name="book"]</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>The possibilities are endless.</p>
<h4 id="the-download-attribute">The download attribute</h4>
<p>By checking for the <code>download</code> attribute in a link, we can add a download icon to indicate that. See the following:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.content:has(a[download]):before</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<p>Here is an interactive demo. Notice how when there is a link with <code>download</code>. The design changes (Toggle the checkbox).</p>
<astro-island uid="ZuN5IO" prefix="r42" component-url="/_astro/DownloadLink.4iGF9gxP.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"DownloadLink","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_6fx02_1 "><div class="_contentWrapper_6fx02_10"><div><p>Food guide.</p><p>If you are interested, your can <a href="#">Read more</a> about the guide.</p></div></div><div class="_code_6fx02_42"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">Food guide</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">You can </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Read more</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"> about the guide </span></p><p class="token-line"><span class="token plain">  .</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h4 id="reversed-list">Reversed list</h4>
<p>In HTML, we can add the <code>reversed</code> attribute to a list and this will reverse the numbering. Why not add an icon if the list is revered?</p>
<p>Here you go:</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.content:has(ol[reversed]) h3:before</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<astro-island uid="Z2fwxAF" prefix="r43" component-url="/_astro/ReversedList.B647vQA8.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"ReversedList","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_biq0y_1 "><div class="_contentWrapper_biq0y_10"><div><p>Upcoming confs</p><ol reversed=""><li>CSS day</li><li>Web directions summit</li><li>Smashing Conf</li></ol></div></div><div class="_code_biq0y_42"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">ol</span><span class="token tag"> </span><span class="token tag attr-name">reversed</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">ol</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h3 id="question-quiz">Question quiz</h3>
<p>This is an interesting usage of CSS <code>:has()</code>. I used it for:</p>
<ul>
<li>Changing the header color based on whether the answer is correct or not</li>
<li>If the answer is wrong, the correct one will flash in green.</li>
</ul>
<p>Play with the demo below:</p>
<ul>
<li>Pick the wrong answer (the first and last)</li>
<li>Pick the correct answer (the second one)</li>
</ul>
<astro-island uid="2rqqiA" prefix="r44" component-url="/_astro/Question.yFB9Eue9.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Question","value":true}' await-children=""></astro-island>
<p>Here is the HTML:</p>
<pre class="language-html"><code is:raw="" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>question<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>questionHeader<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>answer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">data-correct</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Responsive design<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>Each option in the answers list has a <code>data-correct</code> HTML attribute. This will be useful to detect the correct answer.</p>
<p>In CSS, we query the <code>.question</code> container and see if there is an answer that matches for the following:</p>
<ul>
<li>Checked by the user</li>
<li>Has the <code>data-correct=false</code> or <code>data-correct=true</code></li>
</ul>
<p>If it’s false, then we add the red color.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.question:has(input[data-correct="false"]:checked)</span> <span class="token punctuation">{</span>
  <span class="token selector">.questionHeader</span> <span class="token punctuation">{</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 7px 0 0 <span class="token function">var</span><span class="token punctuation">(</span>--wrong<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--wrong-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>And if it’s correct, the color is green.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.question:has(input[data-correct="true"]:checked)</span> <span class="token punctuation">{</span>
  <span class="token selector">.questionHeader</span> <span class="token punctuation">{</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 7px 0 0 <span class="token function">var</span><span class="token punctuation">(</span>--correct<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--correct-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>For the flashing animation, we need to detect if an answer is wrong, and then add a CSS animation to the correct answer.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.question:has(input[data-correct="false"]:checked)</span> <span class="token punctuation">{</span>
  <span class="token selector">input[data-correct="true"] + label</span> <span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> flash 1s infinite alternate<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> flash</span> <span class="token punctuation">{</span>
  <span class="token selector">from</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">to</span> <span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #5ed235<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>

<p>How you ever come across a use case where you need to conditionally wrap a header?</p>
<p>For example, in the main landing page for non-logged users, the header is taking the full width of the viewport. For the logged user, the header’s content is within a wrapper with a maximum width.</p>
<p>See the following demo and try to toggle the checkbox on and off.</p>
<astro-island uid="ZK24ot" prefix="r45" component-url="/_astro/HeaderWrapper.D7ZL7RsK.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Modal","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_6ma7f_1 undefined"><div class="_liveExample_6ma7f_92"><div><p class="_tag_6ma7f_111">HTML</p><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">header</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"> </span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Logo</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">nav</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">nav</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"> </span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></div></astro-island>
<p>Notice how when there is a wrapper, the content is contained. The indicators on the left and right represent the space.</p>
<p>Say we want to apply Flexbox to the header. If there is no wrapper, then flexbox is applied on the header itself. If there is a wrapper, then we apply flexbox to the wrapper.</p>
<pre class="language-css"><code is:raw="" class="language-css">
<span class="token selector">.siteHeader:not(:has(.headerWrapper))</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token selector">.siteHeader:has(.headerWrapper)</span> <span class="token punctuation">{</span>
  <span class="token selector">.headerWrapper</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>That way, flexbox will be applied conditionally based on the presence of a wrapper.</p>
<h3 id="card-thumb">Card thumb</h3>
<p>A card might not always have an image. We can change the styling a bit if the card doesn’t have an image.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card:not(:has(img))</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<astro-island uid="Z1FdCeV" prefix="r46" component-url="/_astro/Card.BOOWbhaK.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$6","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_b0aml_1"><article class="_card_b0aml_9"><img src="/assets/target-size/cookies.jpg" alt=""><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></astro-island>
<h3 id="card-thumb---horizontal">Card thumb - horizontal</h3>
<p>Or we might need to change the card to a horizontal style if there is an image.</p>
<astro-island uid="Z14dyoF" prefix="r47" component-url="/_astro/Card2.COhyOo_1.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$5","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_17s0l_1"><div class="_code_17s0l_82"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">article</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">h3</span><span class="token tag punctuation">&gt;</span><span class="token plain">Yummy cookies</span><span class="token tag punctuation">&lt;/</span><span class="token tag">h3</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">Learn how to make great cookies at home.</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span></p></pre></div><div><article class="_card_17s0l_12"><div><h3>Yummy cookies</h3><p>Learn how to make great cookies at home.</p></div></article></div></div></div></astro-island>

<p>In the following example, we have a navigation. When one of the <code>&lt;li&gt;</code> items have a secondary menu, we want to use <code>:has()</code> to add an arrow to the <code>&lt;li&gt;</code>.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">li:has(.subMenu)</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">li:has(.subMenu) a:after</span> <span class="token punctuation">{</span>
  
<span class="token punctuation">}</span></code></pre>
<astro-island uid="1Mc51N" prefix="r48" component-url="/_astro/Card3.1qk2myZs.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$4","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1rewo_1"><div class="_code_1rewo_91"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">ul</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">nav</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">/products</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Products</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">ul</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>

<p>Based on the previous example, say we have a submenu with a dynamic number of items. We can change the menu grid based on the number of items.</p>
<p>Play with the add and remove buttons in the demo to see it yourself.</p>
<astro-island uid="2sKa5H" prefix="r49" component-url="/_astro/MenuGrid.DvuMzUJl.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"MenuGrid","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_1vpko_1"><p class="demoActions"><button class="button button--add">Add</button><button class="button button-remove">Remove</button><button class="button button--reset">Reset</button></p><div class="_code_1vpko_98"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">ul</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">nav</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">/products</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Products</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">ul</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">subMenu</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Item 1</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Item 2</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Item 3</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Item 4</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">Item 5</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;/</span><span class="token tag">ul</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">li</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">ul</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<p>This is done via the <code>:nth-last-child</code></p>
<pre class="language-css"><code is:raw="" class="language-css">
<span class="token selector">.submenu:has(li:nth-last-child(n + 6))</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token selector">.submenu:has(li:nth-last-child(n + 8))</span> <span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 350px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="articles-section">Articles section</h3>
<p>This example is inspired from Jen Simmons CSS <code>:has()</code> <a href="https://webkit.org/blog/13096/css-has-pseudo-class/">article on webkit</a>. The idea is to change the CSS grid if an article contain an image.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span>
  <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token selector">.article:has(img)</span> <span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Play with the demo below:</p>
<astro-island uid="zWfxI" prefix="r50" component-url="/_astro/Card4.CuvLGsMb.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$3","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_it94y_1"><div><div class="_grid_it94y_12"><article class="_article_it94y_18"><p>Fruit Tart Mastery</p><p>Perfecting the art of fruity tart creation.</p></article><article class="_article_it94y_18"><p>Ultimate Brownie Bliss</p><p>Elevate your baking with irresistible brownies</p></article><article class="_article_it94y_18"><p>Fruit Tart Mastery</p><p>Unlock the secrets to perfect Focaccia baking.</p></article></div></div><div class="_code_it94y_42"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">grid</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">Fruit Tart Mastery</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain">Perfecting the art of fruity tart creation.</span><span class="token tag punctuation">&lt;/</span><span class="token tag">p</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<p>We can take that further and make a lot of variations. For example, I want to style the grid differently if:</p>
<ul>
<li>There is a grid with two items</li>
<li>Both items have photos</li>
</ul>
<h3 id="hero-section">Hero section</h3>
<p>In this example, we have a hero section. When there is no image, the content should be centered. When there is an image, it will display both text and image next to each other.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.hero</span> <span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.hero:has(img)</span> <span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 2fr 1fr<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<astro-island uid="1DTD2M" prefix="r51" component-url="/_astro/Card5.BnAtjreY.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$2","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_u1612_1"><div><section class="_testSection_u1612_12"><div><h3>Fruit tart.</h3><p>Learn how to make the best tart.</p></div></section></div><div class="_code_u1612_32"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">section</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">sectionContent</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">sectionThumb</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">section</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h3 id="card-actions">Card actions</h3>
<p>In this demo, we have a card with two possible states for the actions:</p>
<ul>
<li>One link “view recipe”</li>
<li>Multiple actions: “Like, share, context menu”</li>
</ul>
<p>We can use CSS <code>:has()</code> to check if <strong>one of the start or end</strong> elements is there and change the UI accordingly.</p>
<pre class="language-css"><code is:raw="" class="language-css"><span class="token selector">.card:not(:has(img))</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">color-mix</span><span class="token punctuation">(</span>in srgb<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-1<span class="token punctuation">)</span><span class="token punctuation">,</span> #fff 95%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-left</span><span class="token punctuation">:</span> 4px solid <span class="token function">var</span><span class="token punctuation">(</span>--brand-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.cardActions:has(.start, .end)</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>See the demo below:</p>
<astro-island uid="ZDx3wA" prefix="r52" component-url="/_astro/CardActions.CmCbdIia.js" component-export="default" renderer-url="/_astro/client.C9CDoPFW.js" props="{}" ssr="" client="visible" opts='{"name":"Card$1","value":true}' await-children=""><div><div class="example-wrapper center _wrapper_3npq_1"><div class="_cardContainer_3npq_12"><article class="_card_3npq_12"><img src="/assets/css-has-guide/tart.jpeg" alt=""><div><h3>Fruit tart</h3><p class="_desc_3npq_53">Learn how to make great cookies at home.</p></div></article></div><div class="_code_3npq_88"><pre class="prism-code language-html"><p class="token-line"><span class="token tag punctuation">&lt;</span><span class="token tag">article</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">card</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">img</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">thumb.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">content</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;</span><span class="token tag">div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">cardActions</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span></p><p class="token-line"></p><p class="token-line"></p><p class="token-line"></p><p class="token-line"></p><p class="token-line"></p><p class="token-line"><span class="token plain"></span></p><p class="token-line"><span class="token plain">      </span><span class="token tag punctuation">&lt;</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">&gt;</span><span class="token plain">View recipe</span><span class="token tag punctuation">&lt;/</span><span class="token tag">a</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">    </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain">  </span><span class="token tag punctuation">&lt;/</span><span class="token tag">div</span><span class="token tag punctuation">&gt;</span><span class="token plain"></span></p><p class="token-line"><span class="token plain"></span><span class="token tag punctuation">&lt;/</span><span class="token tag">article</span><span class="token tag punctuation">&gt;</span></p></pre></div></div></div></astro-island>
<h2 id="outro">Outro</h2>
<p>CSS <code>:has()</code> is a powerful feature that opens a lot of possibilities that weren’t possible before. It literally gives us CSS superpowers! I recommend you start using it today and experiment with it.</p>
<h2 id="resources">Resources</h2>
 <div class="coffee-support"> <p>
Enjoyed the read? If you'd like to support my work,
              consider buying me a coffee. <strong>This interactive guide took a month, which translates
                to 30 coffee cups.</strong> Thanks a latte!
</p> <a href="https://ko-fi.com/ahmadshadeed" target="_blank"><img src="/assets/kofi_button_stroke.png" alt="Support me on Ko-fi" loading="lazy" decoding="async"></a> </div> <section class="newsletter"> <div> <h2>Subscribe to my newsletter</h2> <p>
A place where I share all the awesome CSS articles,
                demos, and updates that I like.
</p> </div>  </section> </div>