Home >Web Front-end >CSS Tutorial >Use the :nth-last-child(2) pseudo-class selector to select the style of the second-to-last child element

Use the :nth-last-child(2) pseudo-class selector to select the style of the second-to-last child element

WBOYOriginal: 2023-11-20 11:22:471751browse

Use the :nth-last-child(2) pseudo-class selector to select the style of the penultimate child element. Specific code examples are required

In CSS, pseudo-class Class selectors are a very powerful tool that can be used to select specific elements in the document tree. One of them is the :nth-last-child(2) pseudo-class selector, which selects the second-to-last child element and applies styles to it.

First, let's create a sample HTML document so that we can use this pseudo-class selector in it. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
  <style>
    ul li:nth-last-child(2) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
  </ul>
</body>
</html>

In the above example, we have created an unordered list (ul) and contains several list items (li). We select and apply styles to the second to last list item by using the :nth-last-child(2) pseudo-class selector in CSS. In this example, we set the font color of the second-to-last list item to red.

When we open this sample document in the browser, we will find that the font color of the fifth list item changes to red because it is the penultimate list item.

By using the :nth-last-child(2) pseudo-class selector, we can easily select and apply styles to the penultimate child element when making a web page. Whether it's highlighting the second most important option in a navigation menu or highlighting the penultimate item in a list, this pseudo-selector can help a lot.

Because of this, it is very important to master the pseudo-class selectors in CSS. They can bring us more flexibility in layout and style. I hope this simple example can help you better understand and use the :nth-last-child(2) pseudo-class selector.

The above is the detailed content of Use the :nth-last-child(2) pseudo-class selector to select the style of the second-to-last child element. For more information, please follow other related articles on the PHP Chinese website!

css html 选择器伪类 ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use the :only-child pseudo-class selector to select styles where the parent element has only one child element.Next article：Use the :only-child pseudo-class selector to select styles where the parent element has only one child element.

See more

Use the :nth-last-child(2) pseudo-class selector to select the style of the second-to-last child element

Related articles