https://nalar.dev/tags/selectors/ Recent content in Selectors on Nalar Hugo en-us Wed, 02 Sep 2026 00:00:00 +0700 https://nalar.dev/practical-conditional-styling-with-css-has-selector/ Wed, 02 Sep 2026 00:00:00 +0700 https://nalar.dev/practical-conditional-styling-with-css-has-selector/ <p>CSS traditionally selects an element from information about that element or its ancestors. The <code>:has()</code> relational pseudo-class adds a different capability: an element can match according to relative selectors evaluated from that element.</p> <p>This makes many parent-aware and sibling-aware styles possible without adding state classes solely for presentation. The useful mental model is not &ldquo;select the parent,&rdquo; but &ldquo;select this element if a related element matches a condition.&rdquo;</p> <h2 id="read-has-from-the-outside-in">Read :has() from the outside in</h2> <p>Consider a card that should use a different layout when it contains a direct image child:</p>