子が最後かどうかチェックする - テキストノードも含める

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

要素に入れTextノードを

.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>