What is the best way to choose the first parent element that includes a specific class within it?

Question

What is the best way to choose the first parent element that includes a specific class within it?

I am searching for a method to identify the initial parent element that includes another element with a specified class within it.

For instance:

<div class="wrapper">
  <div class="item">
    <div class="inner-element type-a">
    </div>
  </div>
  <div class="item">
    <!-- wish to target this one -->
    <div class="inner-element type-b">
    </div>
  </div>
  <div class="item">
    <div class="inner-element type-b">
      <!-- but not this one -->
    </div>
  </div>
</div>

Therefore, I want to employ

.wrapper .item:has(.inner-element.type-b)

to choose all of the item divs that have an element with the type-b class, however, my objective is to single out only the first one.

I attempted using

.wrapper .item:has(.inner-element.type-b):first-of-type

but it did not appear to pinpoint the element accurately. Is achieving this solely with CSS possible, or are my selector combinations problematic?

css

Answer 1

Answer №1

To achieve this styling:

.element:nth-child(1 of :has(.inner-item.type-a)) {
  border:2px solid blue;
}

[class]:after {
  content:attr(class);
}

<div class="container">
  <div class="element">
    <div class="inner-item type-a">
    </div>
  </div>
  <div class="element">
    <!-- apply style to this element -->
    <div class="inner-item type-b">
    </div>
  </div>
  <div class="element">
    <div class="inner-item type-b">
      <!-- but not to this one -->
    </div>
  </div>
</div>

Answer 2

To achieve this styling:

.element:nth-child(1 of :has(.inner-item.type-a)) {
  border:2px solid blue;
}

[class]:after {
  content:attr(class);
}

<div class="container">
  <div class="element">
    <div class="inner-item type-a">
    </div>
  </div>
  <div class="element">
    <!-- apply style to this element -->
    <div class="inner-item type-b">
    </div>
  </div>
  <div class="element">
    <div class="inner-item type-b">
      <!-- but not to this one -->
    </div>
  </div>
</div>

Answer 3

Answer №2

One approach could be to implement your initial rule and then reverse it for any additional elements you do not want to style using the adjacent sibling selector ~, for example:

.container .box:has(.inner-content.type-x) {
  background-color: #ff0000;
}

.container .box:has(.inner-content.type-x) ~ .box:has(.inner-content.type-x) {
  background-color: inherit;
}

Answer 4

One approach could be to implement your initial rule and then reverse it for any additional elements you do not want to style using the adjacent sibling selector ~, for example:

.container .box:has(.inner-content.type-x) {
  background-color: #ff0000;
}

.container .box:has(.inner-content.type-x) ~ .box:has(.inner-content.type-x) {
  background-color: inherit;
}

What is the best way to choose the first parent element that includes a specific class within it?

Answer №1

Answer №2

Similar questions

I'm attempting to make this script function correctly when an image is loaded

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

increasing the size of the input field on the lower row of the form

The CSS table-cell element causes adjacent table-cell content to reposition

Setting the height of a parent element in AngularJS when using ng-repeat

The :focus pseudo-class is failing to target the input element

Enhancing readability in a vertical CSS menu with proper spacing

Multi-tier Dropdown with Dynamic Size Adjustment

Position image/icon within navigation bar

Display a div every 3 seconds with the help of jQuery

The alignment of Bootstrap input fields is off center

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

Is there a way for me to collaborate on a footer control with a different website?

Having issues with CSS animation keyframes not functioning properly in NextJS

Hover background color not being applied to child elements within Button element in Firefox

Exchange one HTML element with a different HTML element

Building a Loading Bar with Two Images Using JavaScript and CSS

How to align 3 buttons in a div using CSS

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!