I am trying to make the following query work:

let itemName = "Fancy-item-name"
document.querySelector(`a[href*=${itemName}] + div.ugly-class-wrapper > div.second-ugly-class > div.first-button`);

i tried as well, nextSibling option, but returning undefined for the query.

What am I doing wrong?

the html is following:

<div> 
  <a class="some-ugly-class" aria-label="Fancy-item-name" href="/item/fancy-item-name">Fancy item</a>

  <div class="ugly-class-wrapper">
    <div class="first-ugly-class"></div>
    <div class="second-ugly-class">
      <button type="button" class="first-button"></button>
      <button type="button" class="second-button"></button>
    </div>
  </div>
</div>

i am trying to click the second button <button type="button" class="second-button"></button>, by using a href above, which is always dynamic.