CSS Parent Selector

The Problem

It is not feasible to style a parent or element in a certain way just because it exists. CSS classes must be created and toggled according to the required variation.

Look at this example.

Two variants of our card component are available: Using a picture and Absent a picture. We could use CSS to accomplish something similar:

Since we don't require the flex wrapper, as you can see above, we explicitly made a variant class for having a card without an image. What if we could conditionally accomplish it in CSS instead of using a variation class?

This is where CSS has shown to be helpful. It can assist us in determining whether or not the.card element has a.card__image.

To check if the card :has an image, for instance, we may use the following

Presenting CSS:Has a selector

The: has selector, according to the CSS specification, determines if a parent includes one element or one condition, such as whether an input is focussed.

Let us go back to the earlier sample of an example.

We determine if the.card__image child element is present in the.card parent. Take a look at this figure:

Simply said, the following is the same as the CSS above.

Is the card__image element present on the card?

Isn't that simply wonderful? In CSS, we're starting to see some logic. A perfect moment to create CSS!

The Has Selector Concerns more than just the Parent

In addition to determining if a parent includes a child, we can also determine whether an element is followed by a <p>. Think about the following:

This determines whether a <p> element comes right after the <h2> element.

Or, for example, we may use it in conjunction with a form element to see if a focused input is there.

Browsers Support

As of this writing, CSS:has is compatible with Chrome Canary and Safari 15.4. Pay attention to whether i can utilise the support.

Can It Be Applied as An Improvement?

It is feasible, yes. Using the CSS @supports rule, we can verify as follows.

Now, enough theory-let's look at some application situations!

Uses for CSS:possesses a section header

Usually, when I work on a section header, I have two variations: one that only has the title and the other that has the title plus an anchor link.

If a link is present or absent, I would like to design it differently.

Take note of the following things I used:only choose the direct child link when it has (> a).

Example 1: Card Component

Let us go back to the first card example a little bit. Two versions are available: one with a picture and the other without.

We can also apply some special styles and see if the.card has an image. For us, it's the edge of the boundary.

Two CSS classes are required in the absence of CSS :has to manage what has taken action.

View Example 2 of the Demo Card Component.

This example card shows two different card action options: one with only one item (the link) and the other with several actions (save, share, and more).

We wish to enable display: flex when the card actions have two distinct wrappers for the activities. Like the following, The markup below is only for demonstration; please excuse it.