Problems styling the first p of first li of a ul

[bwofficer]

I want to style the first paragraph of the first list item in my unordered lists.

I've tried various complex selectors and combinations but nothing works.

Why won't ul li:first-of-type p:first-of-type { MY STYLING HERE; } work?

Or ul li:first-child p:first-child { MY STYLING HERE; }?


P.S. this is for a printable PDF output.

[bwofficer]

I've found that li > p:first-child selects the first para in all list items, as I'd expect.

Then I tried li:first-child > p, expecting it to select all paras in the first list item. It doesn't. Is there some CSS syntax rule that means the pseudo-class :first-child can only be used with the last element in a descendant or child selector sequence?

[robdocsmith]

To highlight the first para of the first list item in an unordered list:

Code: Select all

ul li:nth-child(1) p:nth-child(1)  { YOUR CODE }

Replacing both nth-child(1) references to first-child didn't work for me.

To highlight all paras of the first list item in an unordered list:

Code: Select all

ul li:first-child { YOUR CODE }

or

Code: Select all

ul li:nth-child(1) { YOUR CODE }

I couldn't get the first-of-type selector to work, is it suppoorted?

Cheers,

Rob

[bwofficer]

Thanks, Rob

That worked fine. I had to tweak it a little because I'm allowing nested lists and I only want the first para of the first list item of the top level list to be selected, but that was easy enough.

To make it easier to see what effect the CSS was having, I changed the style 'payload' to a simple color: red.

Your CSS:
ul li:nth-child(1) p:nth-child(1) { color: red; }

That worked, but it turned the first para of the first list item of every nested list level red. I've learned enough CSS now to understand that it's because it doesn't specify that there mustn't be another ul above it.

I thought of two ways to rule out instances where there is be another ul above it.

1. Specify that the ul must be the child of the body (rather than descended via another ul)

My CSS:
body > ul li:nth-child(1) p:nth-child(1) { color: red; }

That didn't select anything. To get it to work I had to change it to this:
body > ul > li:nth-child(1) > p:nth-child(1) { color: red; }

However I assume it would fail if the list was enclosed in other tags such as div or span.

2. Use your method but follow it with another style with two ul's in the selector string, to select first para of first list item of ul's nested at level 2+, carrying a payload that reverses the colour change

CSS:
li:nth-child(1) p:nth-child(1) { color: red; }
ul ul li:nth-child(1) p:nth-child(1) { color: black; }

The drawback of this one is that I'm assuming the first paras of the first list items of the level 2+ nested ul's were black before the first style changed them red i.e. they hadn't already been changed from the default to something else by another custom style.

I'm guessing there might be a way to directly specify only one level of ul using the CSS equivalent of ul not-another-ul before the li:nth-child etc. but that's beyond my current CSS skill level. I'll get my CSS book back out and give it a go, though.

Anyway, thanks again. Your answer got me to a workable solution.


Regards,

Bruce