Многоуровневый селектор Css Up

Question

Я пытаюсь найти способ использовать селекторы CSS для форматирования определенного родительского div.Например, в следующем примере кода ...

<div id="one">
   <div id="two"
      <div id="three">
         <a href="foo.html">something</a>

... и т. Д.

Я хочу отформатировать div # one, но только если ссылка внутри #one является конкретной страницейкак "foo.html".

Я пробовал несколько вещей, но вот один пример того, что я пытался использовать ...

a[href *="foo"] #one:parent {
    background-color: #FF0000;
}

Есть ли способ сделать это, используяСелекторы CSS, JS или JQuery?Я включил фрагмент кода ниже для тестирования ...

a[href *="foo"] #one:parent {
        background-color: #FF0000;
    }

    <div id="one">
       <div id="two"
          <div id="three">
             <a href="foo.html">something</a>
          </div>
       </div>
    </div>
    

Везде, где я искал ответ, даются лишь подсказки о том, как это сделать с родительскими элементами, которые являются только одним родителем выше, а не несколькими div, как в этомпример.

Answer 1

С CSS вы не можете, но с JS вы можете просто рассмотреть parentNode:

document.querySelector('a[href *="foo"]').parentNode.parentNode.parentNode.style.backgroundColor = "red";

#one {
 padding:50px;
}

<div id="one">
  <div id="two">
    <div id="three">
      <a href="foo.html">something</a>
    </div>
  </div>
</div>

И если у вас n родителей и вы не знаете номер, вы можете создать цикл для поиска вашего элемента:

var a = document.querySelector('a[href *="foo"]');
while (a.parentNode.getAttribute('id') != "one") {
  a = a.parentNode;
}
a.parentNode.style.background = "red";

#one {
  padding: 50px;
}

<div id="one">
  <div id="two">
    <div id="three">
      <div>
        <a href="foo.html">something</a>
      </div>
    </div>
  </div>
</div>