Cypress examples (v13.8.1)

nth-child CSS selector examples

The nth-childopen in new window CSS selector is very powerful. Here are some examples picking different elements from the page.

Note: in these tests the command cy.map comes from plugin cypress-mapopen in new window.

Individual elements

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select the first element, several variants

// using :first-child selector
cy.contains(':first-child', 'Bill Russell')
// using :first selector
cy.contains(':first', 'Bill Russell')
// using :nth-child 1 index
cy.contains(':nth-child(1)', 'Bill Russell')

Select the last element, several variants

// using :last-child selector
cy.contains(':last-child', 'Robert Horry')
// using :last selector
cy.contains(':last', 'Robert Horry')
// using :nth-child n - 1 selector
cy.contains(':nth-child(n-1)', 'Robert Horry')

Select the 3rd element, index starts at 1

cy.contains('li:nth-child(3)', 'Tom Heinsohn')

Select the 3rd element from the end using nth-child(n - 3)

cy.contains('li:nth-child(n - 3)', 'Jim Loscutoff')

Select the 3rd element from the end using nth-last-child

cy.contains('li:nth-last-child(3)', 'Jim Loscutoff')

Even and odd elements

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Let's select odd LI elements

cy.get('li:nth-child(odd)')
  .should('have.length', 5)
  .map('innerText')
  // confirm the first three strings
  .invoke('slice', 0, 3)
  .should('deep.equal', [
    'Bill Russell',
    'Tom Heinsohn',
    'Satch Sanders',
  ])

Let's select even LI elements

cy.get('li:nth-child(even)')
  .should('have.length', 4)
  .map('innerText')
  // confirm the first two strings
  .invoke('slice', 0, 2)
  .should('deep.equal', ['Sam Jones', 'K. C. Jones'])

Select odd elements using An+B notation

cy.get('li:nth-child(2n+1)')
  .should('have.length', 5)
  .map('innerText')
  // confirm the first three strings
  .invoke('slice', 0, 3)
  .should('deep.equal', [
    'Bill Russell',
    'Tom Heinsohn',
    'Satch Sanders',
  ])

Select event elements using An+B notation

cy.get('li:nth-child(2n)')
  .should('have.length', 4)
  .map('innerText')
  // confirm the first two strings
  .invoke('slice', 0, 2)
  .should('deep.equal', ['Sam Jones', 'K. C. Jones'])

Individual elements

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select every 3rd element

cy.get('li:nth-child(3n)')
  .should('have.length', 3)
  .map('innerText')
  .should('deep.equal', [
    'Tom Heinsohn',
    'John Havlicek',
    'Robert Horry',
  ])

Select every 3rd element, starting with the 2nd element

cy.get('li:nth-child(3n + 2)')
  .should('have.length', 3)
  .map('innerText')
  .should('deep.equal', [
    'Sam Jones',
    'Satch Sanders',
    'Frank Ramsey',
  ])

Select first N elements

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select first 2 elements

cy.get('li:nth-child(-n + 2)')
  .map('innerText')
  .should('deep.equal', ['Bill Russell', 'Sam Jones'])

Select last N elements

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select the last 2 elements using :nth-last-child selector

cy.get('li:nth-last-child(-n + 2)')
  .map('innerText')
  .should('deep.equal', ['Frank Ramsey', 'Robert Horry'])

Select elements from K to J

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select elements from index 4 to 6, index starts at 1. Note how the second nth-child(-n + 6) "resets" the counter n to make sure the 6th element is from the start of the siblings list.

cy.get('li:nth-child(n + 4):nth-child(-n + 6)')
  .should('have.length', 3)
  .map('innerText')
  .should('deep.equal', [
    'K. C. Jones',
    'Satch Sanders',
    'John Havlicek',
  ])

Elements after index K

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

Select all elements starting with index 5

cy.get('li:nth-child(n + 5)')
  .should('have.length', 5)
  .contains(':first', 'Satch Sanders')