селектор п-й последний ребенок не работает

Question

У меня есть этот HTML:

<div class="leading-4"> 
<h2>title</h2> 
<p>one para</p> 
<p>Maybe another para</p> 
<p><ul><li>.....</li></ul></p> 
<h4>text</h4> 
</div> 

Я хочу, чтобы изменить р, который имеет ул в нем -

Я думал о

.leading-4 p:nth-last-child(1){ 
} 

и

.leading-4:nth-last-child(1){ 
} 

, но он не работает (t поджилки я не думаю, что это будет)

Что я делаю неправильно, пожалуйста

Answer 1

У вас не может быть <ul> внутри тега <p>! Так что, когда вы ставите <p><ul></ul></p>, браузер считает это <p></p><ul></ul>.

Так технически, есть и не может быть <ul> Внутри <p> так что ваш селектор CSS никогда никогда не выбирает элемент при любом случае в HTML.

Итак, рассмотрите возможность замены элемента на <div>.

Доказательство:

Литература:

• ul element can never be a child of p element
• is it acceptable to put a UL inside of a paragraph??

Решение:

Раствор для выбора последней <p> для вас будет:

p:last-of-type { /* rules */} 

Answer 2

Что вы хотите last-of-type.

Но, как говорит Правейн, вы должны исправить свой HTML. При возникновении сомнений используйте W3C validator.