What is the best way to choose from a group of elements that share the same CSS

One of the challenges I'm facing in automating my application using Selenium webdriver is selecting the third web element on my page with a span tag and class name of 'nav-label'. While I can easily achieve this using XPath, I am curious to know if there is a CSS equivalent selector available.

Here is an example of the webelement in question:

<span class="nav-label">sometext</span>

After inspecting the elements with css=.nav-label, I discovered that there are 3 matching elements. Now, my task is to select the third one specifically. Is it possible to do this using CSS selectors?

Currently, I can achieve the desired result using XPath like so: (//span[@class='nav-label'])[3]

I am eager to find out if there is a CSS equivalent for the XPath method described above.

cssseleniumxpath

Answer №1

Getting the desired outcome solely through CSS selectors is not feasible.

:nth-of-type() comes close, however, it only works within siblings and cannot target elements across different levels.

One workaround could be using a CSS selector to locate all elements with the specified class, then filtering to select the 3rd node. However, this approach may be less efficient and require more code maintenance.

If the XPath (//span[@class='nav-label'])[3] is effective for your needs, it might be best to stick with that expression.

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

Arrange two divs on either side of the center div when on a smaller screen

Looking for a straightforward approach to achieve this. Imagine it as follows: [A][__B_][A] to [A][A] [__B_] I hope that explanation is clear, but I'm happy to provide more details if necessary. Thank you in advance! ...

htmlcss

Issues with Selenium WebDriver - Xpath locator fails when the element's text includes Unicode characters

I'm currently facing an issue with selecting an option from a menu that looks like a dropdown but is not a standard select menu. I can easily select options in English, but the problem arises when I need to choose an option in French which includes th ...

seleniumxpathunicodeselenium-webdriverwebdriver

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

htmlcssbootstrap-4

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Maintain the structure of the slick slider during transitions

I am working with the slick slider and aiming to achieve a specific layout for the slider itself. What I require is a structure that looks like this: div div div div div I have managed to implement this design successfully, bu ...

javascriptjqueryhtmlcssslick.js

Conceal and reveal buttons at the same location on an HTML webpage

There are 3 buttons on my custom page called page.php: <input type="submit" value="Btn 1" id="btn1"> <input type="submit" value="Btn 2" id="btn2" onClick="action();> <input type="submit" value="Btn 3" id="btn3" onClick="action();> ...

javascripthtmlcss

Steps to fix the issue of "Plugin prefix 'surefire_report' not found in current project or plugin groups"

I recently started using Maven for automating a website. When running my test cases, I encountered an error stating "No plugin found for prefix 'surefire_report' in the current project and in the plugin groups." Here is a screenshot of my pom fil ...

mavenseleniumpom.xml

Finding an element in Selenium using Java

After trying various solutions, I am still unable to get the user email field element in Selenium. The methods I used included waiting for the element, using page factory, and other approaches. However, none of these worked as expected and I continue to en ...

javaselenium

Creating unique borders with CSS styling

Encountering an issue with my CSS. I have a <table> where I added border using the following CSS: table, th, td, tr { border: thin 1px solid black; } The result is double solid lines as seen below. Looking for a way to create a table without s ...

htmlcss

What could be causing my dropdown menu to not appear when clicked?

I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...

javascripthtmlcss

Issue with Bootstrap where Flex and Nowrap are not functioning properly with the first column when using text-truncate

How can I prevent the first column from wrapping to the second row? The second column has text truncation applied to it. What changes should I make to ensure the first column expands and never wraps? <link href="https://stackpath.bootstrapcdn.com/boo ...

cssbootstrap-4flexboxword-wrap

The CSS files are not loading automatically in my React application using Vite

I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...

javascriptcssreactjstypescript

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

The Ajax:Calendar has a small content display, making it difficult for me to view all the days at once

I am currently utilizing Ajax Calendar v3.0.20820.6783 in my Asp.net-3.5 project and it is functioning properly. However, I am facing a CSS problem that I have been unable to resolve. The calendar appears small and some days like Saturday and Sunday are m ...

cssasp.netajaxasp.net-ajax

To interact with a unique button that is located in the first row of a dynamically generated table from a database, follow these steps to ensure that the id and name attributes

Currently, I am working on an automation script for the website using Selenium with Python. The script involves entering a value and clicking on search to retrieve unique protein data. I want to click on the button in the first row, but the button id and ...

seleniumselenium-webdriverselenium-chromedriverselenium-ideselenium-grid

Conceal the content in order to determine the height of images displayed next to each

I am working on a layout where there are rows with images in the left column and text in the right column. The images have a ratio of 16:9. In case the text becomes too long, I would like to show only a portion of it with a gradient mask and provide a "Rea ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

Unique CSS content for varied designs

I have a CSS code snippet for a tooltip: .GeneralTooltip { background:#c7430f; margin:0 auto; text-transform:uppercase; font-family:Arial, sans-serif; font-size:18px; vertical-align: middle; position:relative; } .GeneralTooltip::before { content:"This is ...

htmlcsstooltip

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

javascriptphpcsscursor