Selecting the Second Last Element with CSS

In web development, it's often necessary to target specific elements within a document structure. When choosing the element based on its position within its parent, CSS provides the :last-child selector, which allows us to select the last element. However, in certain scenarios, we may need to select the second last element.

For this purpose, CSS3 introduces the :nth-last-child(n) selector, where n represents the position of the element counting from the end. To select the second last element, we can use :nth-last-child(2).

This selector is applicable to the following example:

  
a
  
b
  
SELECT THIS
 
  
c

Using the :nth-last-child(2) selector, we can style the desired element without the need for jQuery.

Browser Support:

The :nth-last-child selector is supported by modern browsers, including:

• Chrome 2
• Firefox 3.5
• Opera 9.5
• Safari 3.1
• Internet Explorer 9