Css3 Selector to Find the 2Nd Div of the Same Class

CSS3 selector to find the 2nd div of the same class

UPDATE: This answer was originally written in 2008 when nth-of-type support was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2), unless you have to support IE8 and older.

Original answer from 2008 follows (Note that I would not recommend this anymore!):

If you can use Prototype JS you can use this code to set some style values, or add another classname:

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)

But if you're generating the html serverside you might just as well add an extra class on the second item...

style 2nd element on the page with same class

What holds the <ul> elements? I'll assume a <div id = "lists">

/* First element */
div > ul.topbardropdownmenu:first-child{

}

/* Rest of the elements */
div > ul.topbardropdownmenu{

}

...alternatively

div > ul.topbardropdownmenu:not(:first-child)

How can I select the second element from a group of divs with the same class?

For future reference, you can easily find the CSS selector for any element by inspecting it. For example, in Firefox, right-click the element on the page and click Inspect Element. Then in the inspector right-click the element's tag and click Copy->CSS Selector. In this case it will give you div.container:nth-child(2). You can then use that directly with document.querySelector:

let second = document.querySelector('div.container:nth-child(2)')console.log(second)

<div class='container'>1</div><div class='container'>2</div><div class='container'>3</div><div class='container'>4</div>

How do I find second div class with the same name?

Often, I prefer using CSS selectors. In this simple case you could select the second child that has the class name card-body. You can use the nth-child selector to grab the second div:

import bs4

html = """
<div class="card">
    <div class="card-body">Not this</div>
    <div class="card-body">But this</div>
</div>
"""
soup = bs4.BeautifulSoup(html)
print(soup.select('div.card-body:nth-child(2)'))

Output

[<div class="card-body">But this</div>]

If you happen to be in a situation where the targetted element is not actually the second element, but simply the second element with the class card-body, it may be advantagous to use nth-child(n of selector). This will select the second one element that matches the specified selector:

html = """
<div class="card">
    <div class="other-class">Not this</div>
    <div class="card-body">Or this</div>
    <div class="card-body">But this</div>
</div>
"""
soup = bs4.BeautifulSoup(html)
print(soup.select('div:nth-child(2 of .card-body)'))

Output

[<div class="card-body">But this</div>]

BeautifulSoup's CSS selector logic is driven by the SoupSieve library, and more information can be found here: https://facelessuser.github.io/soupsieve/selectors/pseudo-classes/#:nth-child.

How to get 2nd div of the same class with Cypress

Use the eq to get A DOM element at a specific index in an array of elements.

From API docs:

The querying behavior of this command matches exactly how .eq() works in jQuery. Its behavior is also similar to that of the CSS pseudo-class :nth-child() selector.

cy.get('.bot-message')
  .eq(1) // to get 2nd element. array index (counting) starts from 0
  .should('have.text','I want to send invoice to my email');

How to select the first, second, or third element with a given class name?

You probably finally realized this between posting this question and today, but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements.

Or, to put it simply, since you said in your comment that

there are no uniform parent containers

... it's just not possible with selectors alone, without modifying the markup in some way as shown by the other answers.

You have to use the jQuery .eq() solution.

How do i style two same class divs differently?

I would use nth-of-type selector like so:

.parent{}
.parent > .subparent {}  //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the  second subparent

The nth-of-type() selector enables you to style a specific element amongst a series, in this case we targeted the second .subparent then specified the child we needed.
I hope this helps!

Select only node with two times the same class

You just need a more specific target :)

.abc{  width: 100px;  height: 100px;  background: green;  margin: 5px;}
div[class*="abc abc"] {  background: blue;}

<div class='abc'></div><div class='abc'></div><div class='abc abc'></div>

Puppeteer How to call the 2nd div from the same class

This should work:

Get the array of selector names through $eval and the use them for to find the elements where you'll execute type

const classValues = await page.$eval('body', body => {
    return Array.from(body.querySelectorAll('.sameclass'))  
 });

await page.type(classValues[0], "DifferentSpot1")
await page.type(classValues[1], "DifferentSpot2")

Css3 Selector to Find the 2Nd Div of the Same Class