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

Issue with iOS Mobile Safari Navigation Bar/Toolbar when changing orientation

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

"Enhance Your Design: Creative CSS Animation Effects for Underlined

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

How does adding padding cause two horizontal divs to become vertical?

Display block disappearance persists even after being set to none

What is the process for including icons on buttons?

Eliminating the final space in CSS flexbox layout

The scroll function triggers even upon the initial loading of the page

Close button for body

Styling the React Material UI DataGrid with the MuiDataGrid-window class using createMuiTheme or makeStyles / styled-components

What's causing Angular to not display my CSS properly?

table: column with percentage-based width AND a minimum width in pixels

Determine the maximum size of a specified number of square divs that can fit within responsive parent divs

How to create horizontal spacing between divs using Bootstrap 3

The Boostrap card-deck appears to be see-through and malfunctioning

The background widths do not stretch to 100%, but rather stop right before reaching the

CSS animations are not running as expected

Incorporate a website design template into your Visual Studio project

Material-UI Swipeable Drawer with a see-through design