Можно ли выбрать nth-child (x), но только если это не последний ребенок?

Question

Я хочу выбрать третий элемент в пределах ul, только если он не является последним элементом в ul.

Образец 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> 

Я хочу одну селектор CSS, который, для образца 1, выбирает li с "подкатегорию 1", а для образца 2 , ничего не выбирает.

ul > li:nth-child(3) будет работать для образца 1, но также будет соответствовать «продукту» li ​​в образце 2, который я не хочу делать.

В этом случае я не могу изменить 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; } 

Я хочу, чтобы один селектор CSS,

Если это важно, вы должны будете использовать :not.

Answer 4

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