Cara menggunakan css only affect parent

Example

Specify a background color for every

element that is the only child of its parent:

p:only-child {
  background: #ff0000;
}

Definition and Usage

The :only-child selector matches every element that is the only child of its parent.

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector:only-child4.09.03.53.29.6

CSS Syntax

:only-child {
  css declarations;
} Demo

Having a “parent selector” in CSS is mentioned regularly as something CSS could really use. I feel like I’ve had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I’d document it here.

A classic parent/child:

<div class="parent">
  <div class="child"></div>
</div>

Say it makes a lot of sense for this parent to have hidden overflow and also for the child to use absolute positioning.

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

Now let’s say there’s one special circumstance where the child needs to be positioned outside the parent and still be visible. Hidden overflow is still a good default for the vast majority of situations, so it’s best to leave that rule in place, but in this very specific situation, we need to override that overflow.

.special-child {
   position: absolute; 
   bottom: -20px; /* needs to be slightly outside parent */
}

/* Not real, but just to make a point */
.special-child:parent(.parent) {
   overflow: visible;
}

That selector above is fake but it’s saying, “Select the parent of .special-child,” which would allow that override as needed. Maybe it’s like this:

.parent < .special-child {

}

…which is selecting the element on the left rather than the right. Who knows? Probably both of those are problematic somehow and the final syntax would be something else. Or maybe we’ll never get it. I have no idea. Just documenting a real use case I had.

You might be thinking, “Why not just use another special class on the parent?” I would have, but the parent was being injected by a third-party library through an API that did not offer to add a class of my choosing on it. Ultimately, I did have to add the class to the parent by writing some custom JavaScript that queried the DOM to find the .special-child, find the parent, then add the class there.

Do y’all have some other use-cases for a parent selector?

Here’s one from Uzair Hayat:

My project has an <input> which is wrapped in a<div>. The <div> has a few design elements which need to take effect once the <input> is in

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

1. I could have used

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

2 and

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

3 pseudo-elements, but inputs do not support those as they are replaced elements. Right now, I juse JavaScript to detect if the input is in focus and apply a class to the parent div. I wish I could do…

CSS3 does not have parents selectors. If CSS4 released then there is a proposed CSS4 selector, $, which will be like selecting the li element.

• However, as of now, this code can’t be used in any of the browsers.

ul $li ul.sub { ... }

• In the meantime, we’ll have to use JavaScript if we need to select a parent element.

$('ul li:has(ul.child)').addClass('has_child');

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

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

.card:has(.card__image) { }

4 to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS

.card:has(.card__image) { }

5 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

.card:has(.card__image) { }

5 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

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 */
.card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* A card without an image */
.card--plain {
    display: block;
    border-top: 3px solid #7c93e9;
}

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

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

.card:has(.card__image) { }

5 come to the rescue. It can help us in checking if the

.card h2:has(+ p) { }

1 element has a

.card h2:has(+ p) { }

2 or not.

For example, we can check if the card :has an image and if yes, we need to apply flexbox.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

Introducing CSS .card:has(.card__image) { } 5 selector

According to the , the

.card:has(.card__image) { }

5 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.

.card:has(.card__image) { }

We check if the

.card h2:has(+ p) { }

1 parent contains the

.card h2:has(+ p) { }

2 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 .card:has(.card__image) { } 5 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

.card h2:has(+ p) { }

8, for example. Consider the following:

.card h2:has(+ p) { }

This checks if the

.card h2:has(+ p) { }

9 element is followed directly by a

.card h2:has(+ p) { }

8 element.

Or we can use it with a form element to check if there is a

/* If the form has a focused input, apply the following */
form:has(input:focused) {
    background-color: lightgrey;
}

1 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

.card:has(.card__image) { }

5 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

/* If the form has a focused input, apply the following */
form:has(input:focused) {
    background-color: lightgrey;
}

3 rule like the following.

@supports selector(:has(*)) {
    /* do something */
}

Enough theory, let’s get into the use-cases!

Use cases for CSS .card:has(.card__image) { } 5

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.

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

Notice that I used

/* If the form has a focused input, apply the following */
form:has(input:focused) {
    background-color: lightgrey;
}

5 which will only select the direct child link.

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

View demo

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.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

We can even check if the

.card h2:has(+ p) { }

1 doesn’t have an image and apply some specific styles. In our case, it’s the

/* If the form has a focused input, apply the following */
form:has(input:focused) {
    background-color: lightgrey;
}

7.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

0

Without CSS

.card:has(.card__image) { }

5, we need to have two CSS classes to handle what

.card:has(.card__image) { }

5 did.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

1

View demo

Card component, example 2

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

.card:has(.card__image) { }

4 like the following (Please don’t mind the below markup, it’s purely for demonstration purposes!).

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

2

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

3

Here is what we should do without CSS

.card:has(.card__image) { }

5.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

4

View demo

Card component, example 3

Have you ever needed to reset the

@supports selector(:has(*)) {
    /* do something */
}

2 for a card component based on if there is an image or not? This is a perfect usage for CSS

.card:has(.card__image) { }

5.

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.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

5

Much better!

Here is what we should do without

.card:has(.card__image) { }

5.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

6

View demo

Filtering component

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.

We can do that easily with CSS

.card:has(.card__image) { }

5.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

7

Oh, and we can’t do that in CSS at all. This is one of the things that we will ditch Javascript for when

.card:has(.card__image) { }

5 has support in stable browsers (No, :has has isn’t a typo).

View demo

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

.card:has(.card__image) { }

5, we can check if the select menu has the

@supports selector(:has(*)) {
    /* do something */
}

8 option selected and show the “other” field based on that.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

8

Isn’t that just amazing? We don’t need to worry about the HTML source order as long as the select and form field is within the

@supports selector(:has(*)) {
    /* do something */
}

9 parent element.

See the Pen CSS :has - Other field by Ahmad Shadeed (@shadeed) on CodePen.

Navigation item with a submenu

In this use-case, we have a navigation item with a sub-menu that appears on hover or focus.

What we want to do is to hide the arrow based on whether there is a menu or not. We can do that easily with CSS

.card:has(.card__image) { }

5. The idea is to check if

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

1 contains a

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

2. If yes, we show the arrow icon.

<!-- Card with an image -->
<div class="card">
    <div class="card__image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

<!-- Card without an image -->
<div class="card card--plain">
    <div class="card__content">
        <!-- Card content here -->
    </div>
</div>

9

Without CSS

.card:has(.card__image) { }

5, we will probably have a class to the

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

1 with a sub menu. Something like the following:

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

0

View demo

Header wrapper

While building a header component, we might be sure about whether we want the header to take the full width of the page, or to be contained within a wrapper.

Either way, we need to apply flexbox in order to distribute the header items in a certain way. If the

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

5 is there, we will apply the styles to it. If not, then we will apply them directly to the

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

6 element.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

1

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

2

View demo

Emphasize alerts

In some dashboards, there might be an important alert that the user must be aware of. In that case, having the in-page alert might not be enough. In such a case, we might add a red border and a dimmed red background color to the header element, for example.

Having this will increase the possibility of the user noticing the alert quickly.

With CSS

.card:has(.card__image) { }

5, we can check if the

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

8 element has an alert and if yes, we can add the following styles to the header.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

3

View demo

Switching color schemes

We can use CSS

.card:has(.card__image) { }

5 to change the color scheme of a website. For example, if we have multiple themes that are built with CSS variables, we can change them via a

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

0 menu.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

4

And when we select another option from the list, here is what’s happening in CSS. Based on the selected option, the CSS variables will be changed.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

5

And here is the codepen demo:

See the Pen CSS :has - Alert by Ahmad Shadeed (@shadeed) on CodePen.

Styling generated HTML

In some cases, we don’t have any control over the HTML. For example, within an article’s body. The content management system (CMS) might generate elements in an unexpected way, or the author might embed a video or something.

Suppose that we want to select that

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

1 that is not followed by a paragraph and increase the spacing below it.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

6

Or we need to select the

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

2 that is followed by a

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

1 and do something. These kinds of situations can’t be handled without CSS

.card:has(.card__image) { }

5!

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

7

Button with an icon

In this example, we have a default button style. When we have an icon, we want to use flexbox to center and align the button’s content.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

8

View demo

Multiple buttons

In a design system, we often need to have a group of action buttons. If we have more than 2 buttons, the last one should be displayed on the far opposite side.

We can use quantity queries to achieve that. The following CSS will check if the number of buttons is 3 or more and if yes, the last flex item will be pushed to the right by using

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

5.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

9

View demo

Information modules

I got this example from pinterest design system. When the input has an error, we also want the headline to change and indicate that.

.card:has(.card__image) { }

0

Change grid based on the number of items

With CSS grid, we can use the

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

6 function to create truly responsive and auto-sizing grid items. However, this might not be enough. We also want to change the grid based on the number of items.

Consider the following figure.

.card:has(.card__image) { }

1

When we have 5 items, the last one will wrap into a new row.

We can overcome that by checking if the

<section>
    <div class="section-header">
        <h2>Latest articles</h2>
        <a href="/articles/>See all</a>
    </div>
</section>

5 has 5 items or more. Again, this is using the concept of quantity queries.

.card:has(.card__image) { }

2

Figure and figcaption

In this example, we have an HTML

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

8. If there is a

.section-header {
  display: flex;
  justify-content: space-between;
}

/* If there is a link, add the following */
.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

9, the styling should be a bit different by:

• Adding a white background
• A little of padding
• Decreasing the image

  @supports selector(:has(*)) {
      /* do something */
  }
  

  2

.card:has(.card__image) { }

3

Conclusion

I can’t wait to see what you will all create with CSS

.card:has(.card__image) { }

5. The use-cases in this article are just scratching the surface! I’m sure we will discover plenty of useful uses along the way.

Like they say, there has never been a better time to learn CSS. I’m really, really excited for that’s coming next. Thanks a lot for reading!