nth-child（x）は最後の子ではない場合にのみ選択できますか？

Question

ulの最後の要素でない場合にのみ、ul内の3番目の要素を選択します。

サンプル1：

<ul> 
    <li>Home</li> 
    <li>Cat 1</li> 
    <li>Subcat 1</li> 
    <li>Product</li> 
</ul> 

は試料2：

<ul> 
    <li>Home</li> 
    <li>Cat 1</li> 
    <li>Product</li> 
</ul> 

Iは、単一のCSSサンプル1について、 "SUBCAT 1" とliを選択し、セレクタ、及び試料2について欲しいです何も選択しません。

ul > li:nth-child(3)はサンプル1では動作しますが、サンプル2では 'Product' liと一致しますが、これは嫌いです。

この場合、HTMLを変更できません。

Answer 1

あなたは：nth-​​childを使うことができます：必要なものを達成するためではありません。ここに例があります。

ul li:nth-child(3):not(:last-child) { 
 
    color: red; 
 
}

<ul class="sample1"> 
 
    <li>Home</li> 
 
    <li>Cat 1</li> 
 
    <li>Subcat 1</li> 
 
    <li>Product</li> 
 
</ul> 
 

 

 
<ul class="sample2"> 
 
    <li>Home</li> 
 
    <li>Cat 1</li> 
 
    <li>Product</li> 
 
</ul>

Answer 2

あなたが:last-childセレクタを使用することができます。だから、このようなものになるだろう：

ul >li:last-child { 
    /* Your CSS */ 
} 

More about :last-child

Answer 3

古典的なCSSのアプローチここでは、（時には注意が必要です）:notを使用せず、その後でそれをオーバーライドし、最初の一般的なルールを与えることです特別なケース。

ul > li:nth-child(3) { color: red; } 
ul > li:last-child { color: inherit; } 

私はこれが重要な場合は、あなたが:notを使用する必要があります

、単一のCSSセレクタをしたいです。

Answer 4

ul > li:nth-child(3):not(:last-child), ul > li:nth-child(2):not(:last-child) { 
    color: red; 
}