querySelector to find a DOM element which has particular text anywhere inside its tree

Issue

<div>
    <card class="card-class">
        <header class="header-class">Title 1</header>
    </card>
    <div>Stuff</div>
    <card class="card-class"> <-- This one
        <header class="header-class">Title 2</header>
    </card>
    <div>More stuff?</div>
    <card class="card-class">
        <header class="header-class">Title 3</header>
    </card>
</div>

I would like to pull out the DOM element as noted in the example using 2 conditions. The dom element I am interested in has a class card-class and somewhere inside this DOM element there is an element with class header-class which has a title inside.

I need to get a particular card BY the title text. So in this example I want the card element with 'Title 2'. Is there any way to ahcieve this with just a selector rather than javascript?

Solution

The only possible way I can see this working with one line is if you add a data attribute to the element, and then target that.

const title2 = document.querySelector('.header-class[data-title="Title 2"]');

console.log(title2.textContent);

<div>
  <card class="card-class">
    <header class="header-class" data-title="Title 1">Title 1</header>
  </card>
  <div>Stuff</div>
  <card class="card-class">
    <header class="header-class" data-title="Title 2">Title 2</header>
  </card>
  <div>More stuff?</div>
  <card class="card-class">
    <header class="header-class" data-title="Title 3">Title 3</header>
  </card>
</div>

Answered By - Andy