Styling first-level list items of lists annested listed without using classes or id's

HTML & CSS
1

Here is a ‘how-to’ problem involving styling the first level list items of lists and nested without using classes or id’s.

This is an exercise to see if its possible to (seems it should be) style first items of nested lists purely semantically and with no classes or id’s added.

What is desired, in terms of styling, is indicated in the mark-up provided below.

I’ve been attempting to find the solution using CSS various combinators and child-selectors - but to no avail. This is not a ‘mission-critical’ problem to solve, but I’m really trying to experiment and improve my knowledge and expertise with CSS.

I’m stuck on this - and would very much like help and input on approaches to solve this seemingly simple challenge.

I may be pushing the limits here, but setting numbering based on nested levels (1, a, i etc.), and being able to do this without resorting to “ol li ol li ol…etc…” and relying purely on CSS child/decedent selectors would be really cool…is this possible - how’s it done?


<ol>
	<li>1st First Level List Item (make me a bolded font with added top margin)
		<ol>
			<li>1st Second Level List Item (make me a normal font with extra top margin)</li>
			<li>2nd Second Level List Item (make me a normal font with no top margin)</li>
			<li>3rd Second Level List Item (make me a normal font with no top margin)</li>
		</ol>
	</li>

	<li>2nd First Level List Item (make me a bolded font with added top margin)
		<ol>
			<li>1st Second Level List Item (make me a normal font with extra top margin)</li>
			<li>2nd Second Level List Item (make me a normal font with no top margin)</li>
			<li>3rd Second Level List Item (make me a normal font with no top margin)</li>
		</ol>
	</li>

	<li>3rd First Level List Item (make me a bolded font with added top margin)
		<ol>
			<li>1st Second Level List Item (make me a normal font with extra top margin)</li>
			<li>2nd Second Level List Item (make me a normal font with no top margin)</li>
			<li>3rd Second Level List Item (make me a normal font with no top margin)</li>
		</ol>
	</li>

</ol>
2

[font=verdana]How about:

ol li {font-weight:bold; margin-top:1em;}
ol ol li {font-weight:normal; margin-top:0;}
ol ol:first-child li {margin-top:1em;}

I may be pushing the limits here, but setting numbering based on nested levels (1, a, i etc.), and being able to do this without resorting to “ol li ol li ol…etc…” and relying purely on CSS child/decedent selectors would be really cool…is this possible - how’s it done?

You don’t need the 'li’s in there. This should do the trick:

ol ol {list-style-type: lower-alpha;}
ol ol ol {list-style-type: lower-roman;}

You don’t need to specify decimal for just ‘ol’ because that’s the default rendering.[/font]

3

Hey Stevie D - thanks for your reply!

Not quite the solution I was looking for. The issue is that the added top margin was being applied to 2nd, 3rd etc. list items in the nested list…but…I changed one part of the css you provided…and viola! seems to work like a charm.


ol ol:first-child li {margin-top:1em;}

changed to


ol ol li:first-child {margin-top:1em;}

So to sum up:

CSS Code


		ol li {font-weight:bold; margin-top:1em;}
		ol ol li {font-weight:normal; margin-top:0;}
		ol ol li:first-child {margin-top:1em;}

		ol ol {list-style-type: lower-alpha;}
		ol ol ol {list-style-type: lower-roman;}

We have ‘no class’ - and that’s a good thing! :stuck_out_tongue:

Thanks for your help!

Niv

4

[font=verdana]D’oh! Sorry, cut’n’paste error when I was moving text around :blush:

Apart from that, glad it worked![/font]