Выбрать последний ребенок, за исключением, если это также первым ребенок

Question

Я создал правило для последнего LI теге моего UL:

.className li:last-child { 
    stuff: here; 
} 

Умеет установить правило в CSS, который говорит «применить это стиль к последнему тегу LI EXCEPT, если last-child также является first-child ", т.е. в OL есть только один тег LI.

Answer 1

Вы можете использовать его вместе с :not() селектор.

CSS псевдо-класс :not(X) является функциональным обозначением принимает простой селектор Х в качестве аргумента. Он соответствует элементу, который не представлен аргументом.

li:last-child:not(:first-child) { 
 
    color: red; 
 
}

<ul> 
 
    <li>item a</li> 
 
    <li>item b</li> 
 
    <li>item c</li> 
 
</ul> 
 

 
<ul> 
 
    <li>only item</li> 
 
</ul>

Answer 2

Существует :only-child селектор:

https://css-tricks.com/almanac/selectors/o/only-child/

а также :only-of-type селектор

https://css-tricks.com/almanac/selectors/o/only-of-type/

Вы можете использовать их, чтобы перезаписать что-нибудь селектор :last-child модифицирует.

Answer 3

Вы можете оставить свой CSS, как это и добавить правило, переписывает его, если это первый ребенок:

/* What should happen in the last child */ 
.className li:last-child { 
    stuff: here; 
} 

/* If there is only one child the previous one will be overwritten by this one */ 
.className li:first-child { 
    /* default values */ 
} 

В качестве альтернативы, вы можете использовать что-то более продвинутое:

/* Select the last child if it is not the first child */ 
li:last-child:not(:first-child) { 
    stuff: here; 
} 

I будет использовать второе, но это зависит от вашего знакомства с CSS.

Более аналитически:

• :last-child - Выберите последний ребенок
• :not() - Если это не
• :first-child - первый ребенок

Answer 4

Вы можете предварять * + перед селектором соединения, как li:last-child, чтобы предотвратить его от выбора первого ребенка:

.className > * + li:last-child { 
 
    color: red; 
 
}

<ul class="className"> 
 
    <li>item a</li> 
 
    <li>item b</li> 
 
    <li>item c</li> 
 
</ul> 
 
<ul class="className"> 
 
    <li>only item</li> 
 
</ul>