The CSS :has() Pseudo-Class: A Guide with Examples

CSS is a styling language used to create visually appealing web pages. With the CSS :has() pseudo-class, you can select an element based on whether it contains a specific child element. This pseudo-class is a powerful tool that can simplify your styling and add a level of dynamic behavior to your web pages.

The functional :has() 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.

In this blog post, we’ll be exploring the CSS :has() pseudo-class and how it can be used to simplify your CSS code and add a level of dynamic behavior to your web pages. We’ll also be going over three practical examples of how you can use this pseudo-class in your projects.

The CSS :has() pseudo-class is a selector that allows you to select an element based on whether it contains a specific child element. It has the syntax :has(selector), where selector is the child element you’re interested in. With this pseudo-class, you can create styles that will only be applied to elements that contain the specified child element.

Let’s take a look at an example. Consider the following HTML code:

<div class="card">
  <div class="card-body">
    <h4>Card title 1</h4>
    <p>
      <strong>Lorem</strong> ipsum dolor, sit amet consectetur adipisicing
      elit. Itaque, ullam!
    </p>
    <button class="btn more">more...</button>
  </div>
</div>
<div class="card">
  <div>
    <h4>Card title 1</h4>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque,
      ullam!
    </p>
    <button class="btn more">more...</button>
  </div>
</div>
<div class="card">
  <div>
    <h3>Card title 1</h3>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque,
      ullam!
    </p>
    <button class="btn more">more...</button>
  </div>
</div>

Starter CSS for has selector

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.card {
  width: 300px;
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  margin: 20px auto;
  background-color: white;
}
h4 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}
button {
  padding: 10px 20px;
  border-radius: 20px;
  background-color: blue;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

Let’s say we want to change the background color of the .card element only when it contains a small element. We can use the CSS :has() pseudo-class to accomplish this. Here’s what our CSS would look like

div:has(h4) {
  background-color: red;
}
.card:has(h4) {
  background-color: green;
}
p:has(strong) {
  background-color: yellow;
}
div.active:has(h4) {
  color: red;
  background-color: yellow;
}

With this code, the background color of the .card element will change to black and the text color will change to white whenever it contains a small element.

In addition to the CSS :has() pseudo-class, we’ve also used JavaScript to create a dynamic behavior for our web page. When the user clicks the “more…” button, a small element is added to the parent .card-body element. The following JavaScript code makes this possible:

const cards = document.querySelectorAll(".card");
const buttons = document.querySelectorAll(".more");

buttons.forEach(
  (btn) =>
    (btn.onclick = (e) => {
      const parentCard = e.target.parentElement;
      parentCard.classList.toggle("active");

      let small = document.createElement("small");
      small.innerText = "This is a child element";

      if (parentCard.classList.contains("active")) {
        parentCard.appendChild(small);
      } else {
        parentCard.children[3].remove();
      }
    })
);

div.active small {
  color: red;
}
div.card-body:has(small) {
  background-color: yellow;
}
div:has(small) {
  background-color: black;
  color: #fff;
}

div:has(small) div.card-body {
  background-color: purple;
}

For more information check out the video tutorial on YouTube.

Watch the full tutorial on YouTube and get step by step excellent education information about this project.

Master CSS has Selector with Examples

Table of contact & Timestamps:

• 00:00 – Intro & Project overview
• 00:41 – Project setup for CSS has parent selector
• 02:34 – Create 3 Card using HTML and CSS
• 04:20 – How to use the CSS has() Pseudo-Class
• 05:33 – Use the css has() parent selector when a button is clicked
• 08:49 – Use CSS has parent selector depending on when a child element exists:

Want to become a web developer ?

Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…

Web Development Courses

Love Podcast about web development?

Podcast