检查孩子是否是最后一个 - 还包括文本节点

Question

我想检查父母孩子是否是最后一个：（所以在我的情况下，我想选择.icon它是否是它的父元素中的最后一个元素/节点.button）

<a href="" class="button">
    <i class="icon"></i>
    Button
</a>
<a href="" class="button">
    Button
    <i class="icon"></i>
</a>

我试过这样：.button .icon:last-child也:last-of-type

但是选择器忽略文本节点 - 有没有办法检测它是否.icon在文本之前/之后？

Answer 1

将文本节点放置在元素中

.icon:last-child {
  color: red;
}

<a href="" class="button">
    <i class="icon">Not last child</i>
    <span>Button</span>
</a><br />
<a href="" class="button">
    <span>Button</span>
    <i class="icon">Last child</i>
</a>