to climb and to descend through html elements via css selector

Question

i've this absurd repeted html structure (without classes) and i need to capture all links and the below text.

I can easily get all links with the supersimple css query selector a but i need to catch another text placed in a sibling of the link's ancestor (the captured text must be captured alongside the link).

so i should to go up through the divs levels and then go down again

Some suggestion how to climb and than to descend by css selector?

...
...
...

<div>                                   <----first level of div
    <div>                               <----second level of div
        <span>
            <span>
                <div>                   <----third level of div
                    <a href="">         <----element that i can get easily
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture        <----text i need to capture
            </span>
        </span>
    </div>

<div>
...
...
...

Answer 1

Use .parent() to go up a level, .children() to go down, and .next() to get the next sibling. Put these all together to traverse the DOM from the a to the text span below it.

let result = $();
$("a").each(function() {
    let first_level = $(this).parent().parent().parent().parent();
    let sibling = first_level().next().next();
    let text_element = sibling.children().children()
    result = result.add(this).add(text_element);
})

Answer 2

There currently is no CSS parent selector.

Assuming your document structure is consistent with what you posted, it's trivial to traverse the DOM.

Array.from(document.querySelectorAll('a')).forEach(a => {
  let node = a;
  for (let i = 0; i < 5; i++) node = node.parentNode;
  console.log(a.innerText + ' : ' + node.children[2].children[0].children[0].innerText);
});

<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 1</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 1
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 2</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 2
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 3</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 3
            </span>
        </span>
    </div>
<div>
<div>
    <div>
        <span>
            <span>
                <div>
                    <a href="">Link 4</a>
                </div>
            </span>
        </span>
    </div>
    <div></div>
    <div>
        <span>
            <span>
                text to capture 4
            </span>
        </span>
    </div>
<div>