Html - Is there a CSS / JS querySelector for "upto"?

sudoExclamationExclamation
February 4, 2024
318 views
0 votes
2 Answers

I have the following example:

<div class="foo">
  <div id="a1" class="bar">
  
  </div>
</div>
<div class="foo">
  <div id="a2" class="bar">
  
  </div>
</div>
<div class="foo">
  <div id="a3" class="bar">
  
  </div>
</div>
<div class="foo">
  <div id="a4" class="bar">
  
  </div>
</div>
<div class="foo">
  <div id="a5" class="bar">
  
  </div>
</div>
<div class="foo">
  <div id="a6" class="bar">
  
  </div>
</div>

CSS:

.foo {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: yellow;
}

.bar {
  width: 100%;
  height: 100%;
  background: green;
}

JS:

let fourth = document.querySelector(`#a4`);

Let’s say I have selected the fourth one using the above JS. Is there a querySelector which lets me grab all the bar class divs which are BEFORE this fourth one? So a1, a2, a3? Or, is there a way to grab the previous one – a3?

Something like an "upto" selector and from a different parent?

Answers

I am not aware of any query selector like that but you can achieve it with this code

let fourth = document.querySelector('#a4');
let allBars = document.querySelectorAll('.foo .bar');

// Convert NodeList to an array and find the index of the fourth element
let barArray = Array.from(allBars);
let fourthIndex = barArray.indexOf(fourth);

// Select all elements before the fourth element
let previousElements = barArray.slice(0, fourthIndex);
previousElements.forEach((previousElement) => {
    console.log(previousElement);
    
    // for example
    previousElement.style.width = 300 + 'px';
    previousElement.style.height = 300 + 'px';
    previousElement.style.backgroundColor = 'aqua';
    previousElement.style.marginTop = 10 + 'px';
    
})

    <div class="foo">
        <div id="a1" class="bar">
        
        </div>
      </div>
      <div class="foo">
        <div id="a2" class="bar">
        
        </div>
      </div>
      <div class="foo">
        <div id="a3" class="bar">
        
        </div>
      </div>
      <div class="foo">
        <div id="a4" class="bar">
        
        </div>
      </div>
      <div class="foo">
        <div id="a5" class="bar">
        
        </div>
      </div>
      <div class="foo">
        <div id="a6" class="bar">
        
        </div>
      </div>

Check it out here.

There isn’t a built-in querySelector that I am aware of which directly grabs all the elements before a specific element in the way you mentioned. Having said that, you can achieve your requirement using js by iterating through the elements with the bar class and collecting the ones that come before the selected element.

const allBars = document.querySelectorAll('.bar');
const previousBars = [];

for (let bar of allBars) {
  if (bar.id === 'a4') break;
              //  ^^ or any id as per requirement
  previousBars.push(bar);
}
console.log(previousBars); // contains the elements with id a1, a2, and a3

const allBars = document.querySelectorAll('.bar');
const previousBars = [];

for (let bar of allBars) {
  if (bar.id === 'a4') break;       
  previousBars.push(bar);
}

console.log(previousBars);

<div class="foo">
  <div id="a1" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a2" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a3" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a4" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a5" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a6" class="bar">

  </div>
</div>

To only grab the previous element (a3), you can use the previousElementSibling property:

const previousBar = fourth.parentElement.previousElementSibling.querySelector('.bar');
console.log(previousBar); // returns the element with id a3

let fourth = document.querySelector('#a4');
let previousBar = fourth.parentElement.previousElementSibling.querySelector('.bar');

console.log(previousBar);

<div class="foo">
  <div id="a1" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a2" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a3" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a4" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a5" class="bar">

  </div>
</div>
<div class="foo">
  <div id="a6" class="bar">

  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Is there a CSS / JS querySelector for "upto"?

Answers