Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things.
In this article, I will explain the problem that :has solves, how it works, where and how we can use it with some use-cases and examples, and most importantly how we can use it today.
Table of contents
The problem
Introducing CSS :has selector
The :has selector is not only about the parent
Browser support
Can we use it as an enhancement?
Use cases for CSS :has
Section header
Card component, example 1
Card component, example 2
Card component, example 3
Filtering component
Show or hide form elements conditionally
Navigation item with a submenu
Header wrapper
Emphasize alerts
Switching color schemes
Styling generated HTML
Button with an icon
Multiple buttons
Information modules
Change grid based on the number of items
Figure and figcaption
The problem
Being able to style a specific parent or element based on the existence of an element isn’t possible. We have to make CSS classes and toggle them based on the variation we need.
Consider the following basic example.
We have a card component in two variations: 1) With an image 2) Without an image. In CSS, we might do something like this:
/* A card with an image */.carddisplay:flex;align-items:center;gap:1rem;>/* A card without an image */.card--plaindisplay:block;border-top:3pxsolid#7c93e9;>
As you saw above, we created a variation class specifically for having a card without an image since we don’t need the flex wrapper. The question is, what if we can conditionally do that in CSS, without a variation class?
Well, this is where CSS :has come to the rescue. It can help us in checking if the .card element has a .card__image or not.
For example, we can check if the card :has an image and if yes, we need to apply flexbox.
According to the CSS spec, the :has selector checks if a parent contains at least one element, or one condition like if an input is focused.
Let’s revisit the previous example snippet.
We check if the .card parent contains the .card__image child element. Consider the following figure:
In plain words, the CSS above is equivalent to the following
Does the card has a card__image element?
Isn’t that just amazing? We’re getting some kind of logic in CSS. What a time to write CSS!
The :has selector is not only about the parent
It’s not only about checking if a parent contains a child, but we can also check if an element is followed by a
, for example. Consider the following:
This checks if the element is followed directly by a
element.
Or we can use it with a form element to check if there is a focused input, for example.
/* If the form has a focused input, apply the following */form:has(input:focused)background-color:lightgrey;>
Browser support
At the time of writing, CSS :has works in Safari 15.4 and in Chrome Canary. Keep an eye on Can I use for the support.
Can we use it as an enhancement?
Yes, it’s possible. We can check with CSS @supports rule like the following.
@supportsselector(:has(*))/* do something */>
Enough theory, let’s get into the use-cases!
Use cases for CSS :has
Section header
When I work on a section header, I will mostly have two variations, one with the title only, and one that contains both title and an anchor link.
Based on whether there is a link or not, I want to style it differently.
class="section-header">Latest articleshref="/articles/">See all
Notice that I used :has(> a) which will only select the direct child link.
.section-headerdisplay:flex;justify-content:space-between;>/* If there is a link, add the following */.section-header:has(>a)align-items:center;border-bottom:1pxsolid;padding-bottom:0.5rem;>
Card component, example 1
Let’s go back a bit for the initial card example. We have two variations, one with an image and the other without one.
In this card example, we have two variations of card actions: one with a single item (the link) and the other with multiple actions (save, share, and more).
When the card actions have two different wrappers for the actions, we want to activate display: flex like the following (Please don’t mind the below markup, it’s purely for demonstration purposes!).
Have you ever needed to reset the border-radius for a card component based on if there is an image or not? This is a perfect usage for CSS :has .
Consider the following figure. When the card image is removed, the border radius of the top left and right corners is zero, which looks odd.
/* If no image, add radius to the top left and right corners. */.card:not(:has(img)).card__contentborder-top-left-radius:12px;border-top-right-radius:12px;>.cardimgborder-top-left-radius:12px;border-top-right-radius:12px;>.card__contentborder-bottom-left-radius:12px;border-bottom-right-radius:12px;>
In this example, we have a component with multiple options. When none of them is checked, there is no reset button. However, when at least one is checked, we need to show the reset button.
Oh, and we can’t do that in CSS at all. This is one of the things that we will ditch Javascript for when :has has support in stable browsers (No, :has has isn’t a typo).
Show or hide form elements conditionally
We might need to show a specific form field based on a previous answer or selection. In this example, we need to show the “other” field in case the user selected “other” from the select menu.
With CSS :has , we can check if the select menu has the other option selected and show the “other” field based on that.
Before we get into the parent selector in CSS, we need to understand what is a selector. The selector is defined as selecting the specific element from all the existing elements and styling those elements according to our requirements. Now the parent selector is nothing but the selector of the parent; it means a top element of all inner elements. There is no feature called parent selector. This feature creates a performance issue.
Web development, programming languages, Software testing & others
How does Parent Selector work in CSS?
Even if we don’t have a parent selector feature, still we can achieve this requirement in 2 ways.
Note: The browser executes the CSS selectors from right to left. In the above first executes img, next div, and last .page class.
Any browser, while executing the instructions, first executes the top element, then the bottom, and so on. In the above Syntax 2, first, it executes the body tag it thinks the inside is empty and applies the styles, next executes the div tag and it thinks the inside is empty and applies the styles and lastly executes img tag and applies the settings.
Examples to Implement CSS Parent Selector
Below are the examples mentioned :
Example #1
Square shape parent and child for parent selector Example:
/*Parent and child styles*/ .classParent < width: 400; height: 400px; background: fuchsia; >.classParent, .classSelector < display: flex; justify-content: center; align-items: center; >.classSelector < cursor: pointer; background: brown; width: 50%; height: 50%; >/*When we move the cursor on to child element then immediately parent background color changes*/ .classParent < background: blue; pointer-events: none; >.classParent:hover < background: fuchsia; >.classParent .classSelector < pointer-events: auto; >h1 < color:green; text-align: center; >p
Introduction to Parent Selector
Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.
When the cursor hovers on to brown color, then output:
Example #2
Paragraph child tag with div tag parent selector Example:
/*All inside div selectors paragraphs are applied with below styles*/ div > p < color: white; border: 6px ridge green; font-size: 20px; background: brown; >h1
Brief Introduction-1 about Parent Selector
Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.
Brief Introduction-2 about Parent Selector
Before we get into the parent selector in CSS, we need to understand what is a selector? Selector in CSS is defined as selecting the specific element from all the existing elements and style those elements according to our requirement. Now parent selector is nothing but selector of the parent, it means top element of the all inner elements. Basically there is no feature called parent selector in CSS. This feature creates performance issue.
Example #3
Parent selector with JavaScript Example:
div < font-size: 25px; color: green; >h1
Introduction to Parent Selector by using JavaScript
Hi, I am Amardeep
EDUCBA Online Courses
Philip
Google
Conclusion
There is no direct way to perform the parent selector operation, but we can do it by using either the current selector’s specs or the selector’s Level 3 specs. Also, we can do it by using JavaScript.
Recommended Articles
This is a guide to CSS Parent Selector. Here we discuss an introduction to CSS Parent Selector, and how it works with respective examples. You can also go through our other related articles to learn more –
38+ Hours of HD Videos 9 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
149+ Hours of HD Videos 28 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
253+ Hours of HD Videos 51 Courses 6 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests 82+ Hours of HD Videos 19 Courses 3 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
