Use the :nth-last-of-type(3) pseudo-class selector to select the style of the third-to-last element among the same type

Use the :nth-last-of-type(3) pseudo-class selector to select the third-to-last style among elements of the same type. Specific code examples are required

In CSS, we often need to style elements in web pages. Sometimes, we need to select the third to last element among the same type of elements and apply a specific style to it. At this time, we can use the :nth-last-of-type(3) pseudo-class selector to complete this task.

First, let us take a look at the syntax of the :nth-last-of-type(3) pseudo-class selector:

:nth-last-of-type(n)

In the above code, n represents an integer, indicating which element from the bottom we want to select. In our requirement, we need to select the third to last element, so we set n to 3.

Next, let’s look at a specific example:

HTML code:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

CSS code:

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

In the above example, we have An unordered list containing 6 list items. We want to select the third to last list item and apply a red font and bold style to it. We can use the :nth-last-of-type(3) selector to achieve this purpose.

When we run the above code, list item 4 will be selected as the third to last element, and red font and bold style will be applied. Other list items will not be affected.

As a reminder, when using the :nth-last-of-type(3) selector, we need to pay attention to the hierarchical relationship of the selector. If our target element is not a direct descendant element, but is nested in other elements, then we need to adjust the way the selector is written according to the specific situation. Regarding the hierarchical rules of selectors, you can refer to the relevant specifications of CSS selectors.

To sum up, using the :nth-last-of-type(3) pseudo-class selector can conveniently select the third to last element among the same type elements and apply the specified style to it. Through the above examples, we can quickly get started and understand how to use this selector, so as to better apply it in actual development.

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