What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below:

<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 am tasked with selecting the next immediate element (not adjacent) after the element that contains 

class="js-pagination link active"
. In this case, it is the third li element. I have attempted to use the following CSS selector:

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

However, this is not working as it is searching for the li on the same level as the a tag. How can I achieve this using a CSS selector?

I am unable to use .has() as I am utilizing this selector in Selenium CSS select to locate elements.

javascriptjqueryhtmlcssselenium

Answer №1

In order to choose a li element with the class a.js-pagination.link.active, you can utilize the :has() function and then proceed to select the subsequent li element using .next().

$('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>

It's important to note that there is no :has() selector available in CSS, so this task can only be accomplished through JavaScript.

Answer №2

In jQuery, you can select the class .active, traverse to its parent() element, and then find its 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click to Rotate Angular Chevron

Is it possible to animate the rotation of a chevron icon from left-facing to right-facing using Angular? CSS: .rotate-chevron { transition: .1s linear; } HTML: <button [class.button-open]="!slideOpen" [class.button-close]="slideOpe ...

cssangulartypescript

What specific version is indicated by the @next tag for npm packages?

Which version of the foo package will be installed by running this command? npm install foo@next Neither the package.json nor the semver documentation make reference to the use of next. ...

javascriptnpmnpm-installsemantic-versioning

Error occurred during the Uglify process: Unable to access the 'kind' property as it is undefined

I developed a project using TypeScript (version 3.9.3) and Node (version 10.16.3), but now I want to minify the code by converting it to JavaScript and running UglifyJS. However, after going through this process, the services that were functioning properly ...

javascriptnode.jstypescriptexpress

Getting the json array value and populating it in a dropdown list in angularjs - a step-by-step guide!

{"id":1,"firstName":"John1","lastName":"Doe1","**accountIds**":[12345,12346,12347],"recipients":[{"accountNumber":22222,"firstName":"Mary1","lastName":"Jane1"},{"accountNumber":33333,"firstName":"Mary2","lastName":"Jane2"}]} Show the "accountIds" as a dro ...

javascriptarraysjsonangularjsrestful-url

Using React to implement MUI autocomplete feature alongside a MUI form

Recently, I have been utilizing a MUI form structured in the following manner: <Box component="form" onSubmit={event => { return handleSubmit(event); }} noValidate sx={{mt: 1}}> <TextField margin="normal" ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Python Selenium Keyerror: None Exception Encountered

Challenge: Moving a button based on certain conditions. Below is the code snippet: action_chains = ActionChains(self.driver) while move_x_sum < offset_x - 10: move_x = random.randint(5, 10) action_chains.move_to_element_with_offse ...

pythonselenium

Slerping with quaternions in Three.js can produce undesirable outcomes when near the poles

Check out this video example: https://drive.google.com/file/d/18Ep4i1JMs7QvW9m-3U4oyQ4sM0CfIFzP/view In the demonstration, I showcase how I determine the world position of a ray hitting a globe under the mouse cursor. By utilizing lookAt() with a THREE.Gr ...

javascriptthree.js3dquaternions

What could be the reason why the color of pixels X and Y is not being retrieved successfully in this

Seeking to extract the color of pixel X,Y from an image using the code example provided in this response (). $('#map').mousemove(function(e) { if(!this.canvas) { this.canvas = $('<canvas/>') ...

jqueryhtmlimage-processing

How can a Vue component interact with a JavaScript method?

Within my main.js file, I have configured Vue as follows: window.Vue = require('vue'); Vue.component('my-component', require('./components/MyComponent.vue')); const app = new Vue({ el: '#app', }); Additionall ...

javascriptvue.jsvuejs2

tips for selecting a specific number of records using an ajax call

My database contains 10,000 records. Using AJAX, I am able to fetch all 10,000 records in JSON format. However, I want to modify the behavior so that it only fetches the first 100 records initially, and then fetches another 100 records on subsequent reques ...

jqueryajaxasp.net-mvcentity-frameworkpagination

Submitting a Form with Multiple Pages

I'm encountering a challenge that I'm struggling to work through. Initially, we had a professional build our website, but since parting ways with the company, I've taken over site management. While I can handle basic tasks, I lack the expert ...

javascriptphpjqueryhtmlforms

Adjust the size of the embedded iframe to match the dimensions of the containing div

Is there a method to resize the iframe embed code for a vine so that it fits within the boundaries of the enclosing div? The supplied embed code already includes sizing information as shown below: <iframe src="https://vine.co/v/iMJzrThFhDL/embed/simp ...

javascripthtmlangularjs

python define the CSS selector

The website contains the following code snippet: <table> <tbody> <tr> <td> <time data-timestamp="1458895194718" title="2016-03-25 11:39:54<small class="milliseconds">.718</small>">11:39</time> ...

python-3.xseleniumcss-selectorswebdriver

Adding a stylish underline to text using HTML and CSS

Looking for some assistance with my Html and CSS website project. I am currently facing a challenge trying to place a border below the text as shown in the provided image. Below is the snippet of my Html code: <div class="Sectionheading"> ...

htmlcss

Unlock the encrypted information in the blockchain

I've been working on encrypting and decrypting values using Node's built-in crypto module. I found a helpful tutorial that showed me how to encrypt the data, but it didn't provide any sample code for decryption. When I tried using code from ...

javascriptnode.jstypescriptcryptojs

Utilize Jquery Loop to Showcase JSONP Array

I've gone through a multitude of similar questions, attempted to implement the solutions provided but still can't quite seem to make it work. I'm pretty sure it's just a simple mistake since I'm new to this. I have removed the URL ...

jqueryarraysajaxloopsjsonp

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea... I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this ...

csshoverz-indextransparenttransition

Display a hidden division when a radio button is selected using Javascript and Jquery

Currently, I am in the process of constructing a form that triggers a series of additional questions based on the selected answer. Below is my current working code snippet: $(".appliedWorked").click(function(){ if($(this).val()==="appliedWorkedYes") ...

javascriptjquery

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

javascriptcssvue.js

Trigger PHP function on mouse click in WordPress

On one of my PHP files for a WordPress site, I currently have this code: <div class="tabs"> <a href="#tab1" id="items_id">Items</a> </div> <div class="section" id="tab1"> <?php get_template_part('page/tab1' ...

phpjqueryajaxwordpress