Css if parent have class

The :has() style declaration in the following example adjusts the spacing after headings if they are immediately followed by an heading.

This example shows two similar texts side-by-side for comparison – the left one with an H1 heading followed by a paragraph and the right one with an H1 heading followed by an H2 heading and then a paragraph. In the example on the right, :has() helps to select the H1 element that is immediately followed by an H2 element (indicated by the adjacent sibling combinator + ) and the CSS rule reduces the spacing after such an H1 element. Without the :has() pseudo-class, you cannot use CSS selectors to select a preceding sibling of a different type or a parent element.

With the :is() pseudo-class

This example builds on the previous example to show how to select multiple elements with :has() .

HTML

section> article> h1>Morning Timesh1> h2>Delivering you news every morningh2> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> article> article> h1>Morning Timesh1> h2>Delivering you news every morningh2> h3>8:00 amh3> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> article> section> 

CSS

section  display: flex; align-items: start; justify-content: space-around; > article  display: inline-block; width: 40%; > h1  font-size: 1.2em; > h2  font-size: 1em; color: rgb(150, 149, 149); > h3  font-size: 0.9em; color: darkgrey; > 

h1, h2, h3  margin: 0 0 1rem 0; > :is(h1, h2, h3):has(+ :is(h2, h3, h4))  margin: 0 0 0.25rem 0; > 

Result

Here, the first :is() pseudo-class is used to select any of the heading elements in the list. The second :is() pseudo-class is used to pass a list of adjacent sibling selectors as an argument to :has() . The :has() pseudo-class helps to select any H1 , H2 , or H3 element that is immediately followed by (indicated by + ) an H2 , H3 , or H4 element and the CSS rule reduces the spacing after such H1 , H2 , or H3 elements.

This selector could have also been written as:

:is(h1, h2, h3):has(+ h2, + h3, + h4)  margin: 0 0 0.25rem 0; > 

Logical operations

The :has() relational selector can be used to check if one of the multiple features is true or if all the features are true.

By using comma-separated values inside the :has() relational selector, you are checking to see if any of the parameters exist. x:has(a, b) will style x if descendant a OR b exists.

By chaining together multiple :has() relational selectors together, you are checking to see if all of the parameters exist. x:has(a):has(b) will style x if descendant a AND b exist.

body:has(video, audio)  /* styles to apply if the content contains audio OR video */ > body:has(video):has(audio)  /* styles to apply if the content contains both audio AND video */ > 

Analogy between :has() and regular expressions

Interestingly, we can relate some CSS :has() constructs with the lookahead assertion in regular expressions because they both allow you to select elements (or strings in regular expressions) based on a condition without actually selecting the condition matching the element (or string) itself.

Positive lookahead (?=pattern)

In the regular expression abc(?=xyz) , the string abc is matched only if it is immediately followed by the string xyz . As it is a lookahead operation, the xyz is not included in the match.

The analogous construct in CSS would be .abc:has(+ .xyz) : it selects the element .abc only if there is an adjacent sibling .xyz . The part :has(+ .xyz) acts as a lookahead operation because the element .abc is selected and not the element .xyz .

Negative lookahead (?!pattern)

Similarly, for the negative lookahead case, in the regular expression abc(?!xyz) , the string abc is matched only if it is not followed by xyz . The analogous CSS construct .abc:has(+ :not(.xyz)) doesn’t select the element .abc if the next element is .xyz .

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 22, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS :has Parent Selector

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 */ .card  display: flex; align-items: center; gap: 1rem; > /* A card without an image */ .card--plain  display: block; border-top: 3px solid #7c93e9; > 

    class="card">  class="card__image">  src="awameh.jpg" alt="" />   class="card__content">   class="card card--plain">  class="card__content">  

  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.

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

  Introducing CSS :has selector

  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.

  @supports selector(: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 articles  href="/articles/">See all   

  Notice that I used :has(> a) 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; > 

  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 doesn’t have an image and apply some specific styles. In our case, it’s the border-top .

  .card:not(:has(.card__image))  border-top: 3px solid #7c93e9; > 

  Without CSS :has , we need to have two CSS classes to handle what :has did.

  .card--default  display: flex; align-items: center; > .card--plain  border-top: 3px solid #7c93e9; > 

  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 display: flex like the following (Please don’t mind the below markup, it’s purely for demonstration purposes!).

   class="card">  class="card__thumb>cool.jpg"/>

.card__actions:has(.start, .end)  display: flex; justify-content: space-between; > 

.card--with-actions .card__actions  display: flex; justify-content: space-between; > 

/* If no image, add radius to the top left and right corners. */ .card:not(:has(img)) .card__content  border-top-left-radius: 12px; border-top-right-radius: 12px; > .card img  border-top-left-radius: 12px; border-top-right-radius: 12px; > .card__content  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; > 

.card--plain .card__content  border-top-left-radius: 12px; border-top-right-radius: 12px; > 

.btn-reset  display: none; > .multiselect:has(input:checked) .btn-reset  display: block; > 

.other-field  display: block; > form:has(option[value="other"]:checked) .other-field  display: block; >