nth-last-child selector not working

Question

I have this 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>

I want to edit the p that has the ul in it -

I thought about

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

and

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

but it doesn't' work either (though I didn't think it would)

What am i doing wrong please

Or more probably `p:has(ul)`. But your HTML is invalid, an UL element can't be in a P element. — Denys Séguret, Jun 02 '15 at 08:28
Darn - you''re right. Yes, blooming tired this morning - need a strong coffee! that was to illustrate - actually its a load of links and texts and images.... — maxelcat, Jun 02 '15 at 08:31

score 1 · Answer 1 · answered Jun 02 '15 at 08:28

1

What you want is last-of-type.

But as Praveen says you should fix your HTML. Use the W3C validator when in doubt.

answered Jun 02 '15 at 08:28

MatTheCat

18,071
6
54
69

1

many thanks Praveen. Code fixed and solution works once the (1) is inserted into the brackets – maxelcat Jun 02 '15 at 08:41

score 0 · Accepted Answer · edited May 23 '17 at 12:14

You cannot have a <ul> inside a  tag! So when you put <ul></ul>, the browser considers it as <ul></ul>.

So technically, there's and cannot be <ul> inside a  so your CSS selector never ever selects an element under any case in HTML.

So, consider changing the element to <div> instead.

Proof:

p {color: red;}
ul {color: blue;}
p ul {color: green;}

<p>This is para</p>
<p>
  The next UL element will be kicked out of P. Before UL.
  <ul><li>This is LI inside UL inside P</li></ul>
  After UL. And this becomes normal text under the body, and not under P.
</p>
<ul><li>This is LI inside UL</li></ul>

References:

Solution:

The solution for selecting the last  for you would be:

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

You are right about the structure. You might want to add that, in order to select the last `p` in his code, which isn't the last-child of the parent, he'll need to use `:nth-last-of-type(1)`. — GreyRoofPigeon, Jun 02 '15 at 08:34

nth-last-child selector not working

2 Answers2