CSS Style Parent based on Child

How to use: has() as a Parent Selector

let's know about the use of has() from the basics. Let's imagine that we have a <figure> element based on the content in the figure. Sometimes, our figure wraps only an image.

Now, we are going to apply some styles to the figure that will only apply if there is a figcaption inside the figure.

Let us understand this by taking an example:

HTML Code:

Output:

Also, we have taken the help of Selector Feature Query to hide a reminder about browser support whenever the current browser supports: has().

Example using: has() with CSS Grid

Let's see a second example where we will use has() as a parent selector to easily solve a very practical need.

The: has() pseudo-class makes this simple:

HTML code:

Output:

The above two examples use an element selector. However, with the help of has(), we can combine all the selectors, including the class selector, attribute selector, and ID selector.

Using :has() with the Child Combinator

Before going for has(), let us know about the descendant selector and child combinator.

The descendant selector is with CSS from the beginning. It is a fancy name for when we put a space between two simple selectors. Like this:

With the help of this selector, we can combine <img> with <a> no matter how far apart the a and the img are in the HTML DOM tree.

Let us understand this by taking an example:

HTML code:

Output:

Here, in the above example, there are two additional types of combinators. These combinators are siblings. And it's through these that () becomes more than a parent selector.

Using :has() with Sibling Combinators

Let's review the two selectors with sibling relationships. There's the next-sibling combinator (+) and the subsequent-sibling combinator (~).

Now, we are going to implement the next-sibling combinator (+), which selects only the paragraphs that come directly after an h2 element.

h2 + p

With the help of the subsequent sibling combinator (~), we can select all the paragraph that comes after the h2 element. This combinator must be siblings to each other. But there can be more than one number of other HTML elements in between.

h2 ~ p

Now, with the help of both h2 + p and h2 ~ p, we can select the paragraph elements and not the h2 headlines. Similar to the other element, we can select the last element listed that the selector targets. But what if we want to target the h2? We can use sibling combinators with has().

Styling form states without JS

There are so many pseudo-classes that are going inside the has(). The pseudo-class can do all the things. Also, with the help of pseudo-class, we can only style the element based on a special state or styling one of its children. Also, with the help of pseudo-classes, it can be used to capture states without JavaScript and style anything in the DOM based on that state.

Form input fields provide a powerful way to capture such a state. Form-specific pseudo-classes include :autofill, :enabled, :disabled, :read-only, :read-write, :placeholder-shown, :default, :checked, :indeterminate, :valid, :invalid, :in-range, :out-of-range, :required and :optional.

Let's solve one of the use cases. Let us create the basic form.

Let's apply some background style for the form.

Now, we are going to use form:focus-within instead, but it would behave like form: has(:focus). When a field is set to be focused, then the focus pseudo-class always applies CSS. The focus-visible pseudo-class provides a reliable way to style a focus indicator only when the browser would draw one natively, using the same complex heuristics the browser uses to determine whether or not to apply a focus ring.

Now, I want to style the other fields, the ones not in focus, by changing their label text color and the input border color. Before: has(), this required JavaScript. Now, we can use this CSS.

You can see this code in action in the following demo by clicking inside one of the text fields. As I described earlier, the form's background changes, and the label and input border colors of the fields that are not in focus also change.

Now, let's take an example for better understanding.

HTML code:

Output:

In the above code, let's provide a warning to the user when an error occurs. Let's write the code snippet for this.

Now, let's make the warning text color red.

Dark Mode Toggle with no JS

Let's provide the function to the user to change the toggle to a light and a dark theme. The code snippet for this is as below.

Now, let's provide the select menu option so that the user can select multiple colors.

Now, let's write the complete code :

HTML code:

Output: