: Last-child selector pit -CSS3

CSS3 selectors of: last-child - Eric

Real experience

Recent developments, we noticed a problem ignored for so many years, and share with you.
Project using Antd component library, there is a search box like this:

In order to ensure that the contents drop-down box with the page scroll, antd provides getPopupContainer property, you can refer to an object definition from the drop-down box, then I wrote the following code:

<Select 
    getPopupContainer={ triggerNode => triggerNode.parentNode }
>
   <Option>{somecode...}</Option>
</Select>

After the discovery of this writing there is no border on the right, as

Thus reason investigation found the following code does not work:

.wmstool-input-group.wmstool-input-group-compact > .wmstool-select:last-child > .wmstool-select-selection {
  border-right-width: 1px;
}

Probably interface code as follows:

<div class="wmstool-input-group-compact">
    <div class="wmstool-select"></div>
    <div class="wmstool-select">
        <div class="wmstool-select-selection"></div>
    </div>
    <div style=""></div>
</div>

Small partners to think about the style will work?

Experimental Journey

Previously never written such a code, usually a div contains all of the same type, and that they began to test them, as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      .person p:last-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="person">
      <p>姓名： 小明</p>
      <p>性别： 男</p>
      <div class="intro">xxxxxxx</div>
    </div>
    <div class="person">
      <p>姓名： 小红</p>
      <p>性别： 女</p>
      <div class="intro">xxxxxxx</div>
    </div>
  </body>
</html>

The results are shown:

What !, said yes class is the last person in the p tag it turns red, then we re-test, as follows:

<div class="person">
  <p>姓名： 小明</p>
  <div class="intro">xxxxxxx</div>
  <p>性别： 男</p>
</div>
<hr/>
<div class="person">
  <p>姓名： 小红</p>
  <p>性别： 女</p>
  <div class="intro">xxxxxxx</div>
</div>

The results are shown:

to sum up

We can see from both experiments,: last-child pseudo class selector needs to meet two conditions:
1, meet the basic requirements selector (.person P)
2, must be subelements last element element

Today's share on here, there is little interest in the partnership can be a lot of other test case!

CSS3 selectors of: last-child - Eric

Guess you like