{"id":377635,"date":"2024-03-29T19:07:57","date_gmt":"2024-03-30T02:07:57","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377635"},"modified":"2024-04-19T07:27:55","modified_gmt":"2024-04-19T14:27:55","slug":"the-power-of-has-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-power-of-has-in-css\/","title":{"rendered":"The Power of :has() in CSS"},"content":{"rendered":"\n
Hey all you wonderful developers out there! In this post we are going to explore the use of The \u201cThe functional In years past we had no way of styling a parent element based on a direct child of that parent with CSS or an element based on another element. In the chance we had to do that, we would need to use some JavaScript and toggle classes on\/off based on the structure of the HTML. This JS function is looking for all the h1\u2019s that have a New and improved with modern day CSS coming in hot! The capabilities of what we can do in the browser have come a long way. We now can take advantage of CSS to do things that we traditionally would have to do with JavaScript, not everything, but some things.<\/p>\n\n\n Now you can use A lot of times we as workers on the web are manipulating or working with images. We could be using tools that Cloudinary<\/a> provides to make use of various transformations on our images, but usually we want to add drop shadows, border-radii, and captions (not to be confused with alternative text in an alt attribute).<\/p>\n\n\n\n:has()<\/code> in your next web project.
:has() <\/code>is relatively newish but has gained popularity in the front end community by delivering control over various elements in your UI. Let\u2019s take a look at what the pseudo class is and how we can utilize it.<\/p>\n\n\n\n\n\n\n
Syntax<\/h2>\n\n\n
:has()<\/code> CSS pseudo-class helps style an element if any of the things we’re searching for inside it are found and accounted for. It’s like saying, “If there’s something specific inside this box, then style the box this way AND only this way.”<\/em><\/strong><\/p>\n\n\n\n
:has(<direct-selector>) {\n \/* ... *\/\n}<\/code><\/pre>\n\n\n\n
:has()<\/code> CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.\u201d<\/em><\/strong><\/p>For a more robust explanation, MDN<\/a> does it perfectly<\/cite><\/blockquote><\/figure>\n\n\n
The Styling Problem<\/h2>\n\n\n
:has()<\/code> solved that problem.<\/p>\n\n\n\n
Let\u2019s say that you have a heading level 1 element (h1<\/code>) that is the title of a post or something of that nature on a blog list page, and then you have a heading level 2 (
h2<\/code>) that directly follows it. This h2 could be a sub-heading for the post. If that
h2<\/code> is present, important, and directly after the
h1<\/code>, you might want to make that h1 stand out. Before you would have had to write a JS function.<\/p>\n\n\n
Old School Way – JavaScript<\/h2>\n\n\n
const h1Elements = document.querySelectorAll('h1');\n\nh1Elements.forEach((h1) => {\n const h2Sibling = h1.nextElementSibling;\n if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {\n h1.classList.add('highlight-content');\n }\n});\n<\/code><\/pre>\n\n\n\n
h2<\/code> proceeding it, and applying a class of highlight-content to make the
h1<\/code> stand out as an important article.<\/p>\n\n\n\n
New School Way – CSS<\/h2>\n\n\n
h1:has(+ h2) {\n color: blue;\n}\n<\/code><\/pre>\n\n\n
Throw Some :has() On It!<\/strong><\/h2>\n\n\n
:has()<\/code> to achieve the same thing that the JS function did. This CSS is checking for any h1 and using the sibling combinator<\/a> checking for an h2 that immediately follows it, and adds the color of blue to the text. Below are a couple use cases of when
:has()<\/code> can come in handy.<\/p>\n\n\n
:has Selector Example 1<\/h2>\n\n
HTML<\/h3>\n\n\n
<h1>Lorem, ipsum dolor.<\/h1>\n<h2>Lorem ipsum dolor sit amet.<\/h2>\n<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?<\/p>\n\t\n<!-- WITHOUT HAS BELOW -->\n\n<h1>This is a test<\/h1>\n<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?<\/p><\/code><\/pre>\n\n\n
CSS<\/h3>\n\n\n
h1:has(+ h2) {\n color: blue;\n}<\/code><\/pre>\n\n\n
:has Selector Example 2<\/h2>\n\n\n
The example below is using :has()<\/code> to see if a figure or image has a figcaption element and if it does, it applies some background and a border radius to make the image stand out.<\/p>\n\n\n
HTML<\/h3>\n\n\n
<section>\n <figure>\n <img src=\"https:\/\/placedog.net\/500\/280\" alt=\"My aunt sally's dog is a golden retreiver.\" \/>\n <figcaption>My Aunt Sally's Doggo<\/figcaption>\n <\/figure>\n<\/section><\/code><\/pre>\n\n\n
CSS<\/h3>\n\n\n
figure:has(figcaption) {\n background: #c3baba;\n padding: 0.6rem;\n max-width: 50%;\n border-radius: 5px;\n}<\/code><\/pre>\n\n\n