SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

    HTML Code:
    <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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by NivF007 View Post
    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.
    HTML Code:
    <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>
    How about:
    Code css:
    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:
    Code css:
    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.

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    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.

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

    Code:
    ol ol li:first-child {margin-top:1em;}
    So to sum up:

    CSS Code
    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! :P

    Thanks for your help!

    Niv

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by NivF007 View Post
    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.
    D'oh! Sorry, cut'n'paste error when I was moving text around

    Apart from that, glad it worked!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •