How to select next immediate element in css selector in python selenium?

Question

I have the DOM structure as follows.

<ul>
  <li>
    <a href="#" role="button" class="js-pagination link" data-page="1">1</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link active" data-page="2">2</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="3">3</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="4">4</a>
  </li>
</ul>

I have to select next immediate element (not adjacent element) after element that contains class="js-pagination link active". In our case it is third li element. I tried the following css selector

"ul li a[class='js-pagination link active'] + li"

But it is not working since its looking for li in the same level of a tag. How can we do it using css selector?

I cannot use .has() since I am using this selector in selenium css select to find elements.

What should happen if the `.active` element happens to be in the last of the `
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — CBroe, Oct 25 '16 at 10:40
having .active in the last element wont happen in my case. So currently not considering it — Vivek Srinivasan, Oct 25 '16 at 10:45

Nenad Vracar · Answer 1 · 2016-10-25T10:37:34.853

You can use :has() to select li with a.js-pagination.link.active and then .next() to select next li element.

$('li:has(a.js-pagination.link.active)').next('li')

$('li:has(a.js-pagination.link.active)').next('li').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

Also there is no :has() selector in css so the only way to do this is with js.

can we do it without using :has(). Since I am using the selector inside my selenium query .It doesnt support :has(). — Vivek Srinivasan, Oct 25 '16 at 10:44

score 0 · Answer 2 · answered Oct 25 '16 at 10:37

In jquery, you can find the class .active, get its parent() and find the next() siblings

$('.active').parent().next().css('background', 'green');

  $('.active').parent().next().css('background', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

How to select next immediate element in css selector in python selenium?

2 Answers2