Implement multiple application scenarios of CSS :nth-last-child(-n+4) pseudo-class selector

To implement multiple application scenarios of CSS :nth-last-child(-n 4) pseudo-class selector, specific code examples are required

CSS pseudo-class selection The tool provides us with many convenient ways to select elements. Among them, the :nth-last-child(-n 4) pseudo-class selector is a very useful selector, which can select the fourth to last child and all elements after it. This kind of selector has many application scenarios in actual development. Below I will introduce you to several specific code examples using this pseudo-class selector.

1. Navigation bar style

In most website development, we will encounter the design of the navigation bar. Using the :nth-last-child(-n 4) pseudo-class selector, we can easily select the 4th and subsequent elements of the navigation bar and add specific styles to them, such as setting them to not display the bottom border. , to achieve a special effect.

<style>
.nav-bar div:nth-last-child(-n+4) {
    border-bottom: none;
}
</style>

<div class="nav-bar">
    <div>首页</div>
    <div>新闻</div>
    <div>产品</div>
    <div>关于</div>
    <div>联系</div>
    <div>更多</div>
</div>

2. List style

In a list, we may need to add special styles to the fourth to last element and after, such as marking it as important content or Shown in different colors. Using the :nth-last-child(-n 4) pseudo-class selector, we can easily achieve this effect.

<style>
.list-item:nth-last-child(-n+4) {
    color: red;
    font-weight: bold;
}
</style>

<ul>
    <li class="list-item">第1条内容</li>
    <li class="list-item">第2条内容</li>
    <li class="list-item">第3条内容</li>
    <li class="list-item">第4条内容</li>
    <li class="list-item">第5条内容</li>
    <li class="list-item">第6条内容</li>
</ul>

3. Table style

In the table, we can use the :nth-last-child(-n 4) pseudo-class selector to select the 4th column from the bottom and For the cells after it, add specific styles to them, such as background color or bold display.

<style>
table td:nth-last-child(-n+4) {
    background-color: yellow;
    font-weight: bold;
}
</style>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

Through the above code example, we can see that the nth-last-child(-n 4) pseudo-class selector has many application scenarios in actual development. It gives us more flexibility in selecting elements and adding specific styles to them. Hopefully these examples will help you get better at applying CSS pseudo-class selectors.

The above is the detailed content of Implement multiple application scenarios of CSS :nth-last-child(-n+4) pseudo-class selector. For more information, please follow other related articles on the PHP Chinese website!