How to Select Nth Element of the Same Type

How to select nth element of the same type

I know I can do it with document.querySelectorAll("td")[nth], but I'm looking for a pure css way.

There is no pure CSS equivalent. See Matching the first/nth element of a certain type in the entire document

How do I select nth element in a given set

Use the nth-child selector:

span:nth-child(2) {}

This selects the first span since it's the second child. If you want to select the second span, you can use this instead:

span:nth-of-type(2) {}

You can also use first-child, last-child, nth-child(odd) or nth-child(even), among others.

Select nth element for elements that do not share the same immediate parent

Since :nth-child and other similar selectors make matches based on sibling elements and CSS has no parent-wise selectors this isn't possible.

Less is simply a language that is compiled into CSS, it doesn't actually add any new features into CSS.

The easy alternative is to use Javascript.

Selecting every nth of the same type of element, but not within the same parent

You can iterate with .each() and then add color/Class accordingly to index(nth element)

$('a').each(function(index, element){
  switch(index%5){
    case 0:
        $(element).addClass('blueColor');
        break;
    case 1:
        $(element).addClass('redColor');
        break;
    default:
    //Whatever    
  }
});

Fiddle:

Is there a CSS selector to locate nth element of a given type in the entire page?

Simply change the target to point to your new <div> elements instead:

div:nth-of-type(1) h2 { ... }
div:nth-of-type(2) h2 { ... }

This obviously depends on how many divider elements are on your page. If you are using dividers not just to contain <h2> elements you could always give them a new class:

<div class="h2-container">
    <h2>Hello, world!</h2>
</div>

div.h2-container:nth-of-type(1) h2 { ... }
div.h2-container:nth-of-type(2) h2 { ... }

This does assume that all your divider elements are under the same parent, however.

Can't select nth element of same class with xpath / selenium IDE

I think you want to search, then extract i-th item, so you need brackets:

(//a[contains(@class, 'className')])[${i}]

for example:

(//a[contains(@class, 'rf-project-cover__title')])[2]

returns item with link text my portfolio

Select nth element inside nth element with XPath

You can use the below xpath :

//div[@class='row'][2]/descendant::input[2]

or

((//div[@class='row'])[2]/descendant::input)[2]

Explanation :

input is descendant not direct child so you can not do

(//div[@class='row'])[2](//input)[2]

---

Related Topics