How to Select the Last Second Element with CSS

Solution with the CSS :nth-last-child() pseudo-class

CSS has a :nth-last-child() pseudo-class, which is used to match elements based on their position in the group of siblings, and it counts from the end.

In the example below, we have some <div> elements within a <section> tag. To select the last second <div>, we use a single argument (2) with the :nth-last-child() pseudo-class and add a background to highlight it.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of selecting the last second <div> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      section >:nth-last-child(2) {
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <section>
      <div>Line №1</div>
      <div>Line №2</div>
      <div>Line №3</div>
      <div>Line №4</div>
    </section>
  </body>
</html>

Result

Line №1
Line №2
Line №3
Line №4

Let’s see another example, where we have a <table> and select the last second <tr> element of it.

Example of selecting the last second <tr> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border: 1px solid purple;
      }      
      table td {
        padding: 5px 20px;
      }      
      tr:nth-last-child(2) {
        font-weight: 600;
        color: purple;
        font-style: italic;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Line №1</td>
        </tr>
        <tr>
          <td>Line №2</td>
        </tr>
        <tr>
          <td>Line №3</td>
        </tr>
        <tr>
          <td>Line №4</td>
        </tr>
        <tr>
          <td>Line №5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

In the next example too, we select the last second element and specify its font-weight, color, font-style, and font-size.

Example of selecting the last second <tr> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border: 1px solid purple;
      }      
      table td {
        padding: 10px 30px;
      }
      /* Selects the last 3 elements */      
      tr:nth-last-child(-n+3) {
        background-color: #a76db5;
      }
      /* Selects every element starting from the second item */      
      tr:nth-last-child(n+2) {
        color: black;
        text-transform: uppercase;
      }      
      tr:nth-last-child(2) {
        font-weight: 600;
        color: white;
        font-style: italic;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Line №1</td>
        </tr>
        <tr>
          <td>Line №2</td>
        </tr>
        <tr>
          <td>Line №3</td>
        </tr>
        <tr>
          <td>Line №4</td>
        </tr>
        <tr>
          <td>Line №5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Example of selecting the last second <li> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        padding: 5px;
      }      
      ul li:nth-last-child(2) {
        font-weight: bold;
        color: coral;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        Line №1
      </li>
      <li>
        Line №2
      </li>
      <li>
        Line №3
      </li>
      <li>
        Line №4
      </li>
    </ul>
  </body>
</html>

Example of selecting the last second <span> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: block;
        padding: 5px 15px;
      }      
      span:nth-last-child(2) {
        font-style: italic;
        color: green;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>
      <span>
        Line №1
      </span>
      <span>
        Line №2
      </span>
      <span>
       Line №3
      </span>
      <span>
       Line №4
      </span>
    </p>
  </body>
</html>

Example of selecting the last second <p> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 5px 15px;
      }      
      p:nth-last-child(2) {
        color: lightblue;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Line №1
      </p>
      <p>
        Line №2
      </p>
      <p>
        Line №3
      </p>
      <p>
        Line №4
      </p>
    </div>
  </body>
</html>