Results 1 to 3 of 3

Thread: :last-child styling not working

  1. #1
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question :last-child styling not working

    Hi, I am trying to remove the top border fro the first and the bottom border for the last list item in a series. Only one of these is working and I cannot figure out the problem. I am using Firefox and Chrome to view these, by the way.

    Here is the html:
    HTML Code:
    <section class="tabmain">
    	<ul id="categories">
    		<li><a href="#">Categories 1<a></li>
    		<li><a href="#">Categories 2<a></li>
    		<li><a href="#">Categories 3<a></li>
    	</ul>
    	<ul id="comments">
    		<li><a href="#">Comments 1<a></li>
    		<li><a href="#">Comments 2<a></li>
    		<li><a href="#">Comments 3<a></li>
    	</ul>
    	<ul id="archives">
    		<li><a href="#">Archive 1<a></li>
    		<li><a href="#">Archive 2<a></li>
    		<li><a href="#">Archive 3<a></li>
    	</ul>
    </section>
    Here is the css:
    Code:
    #categories li:last-child {
    	border-bottom: none;
    }
    #categories li:first-child {
    	border-top: none;
    	padding-top: 10px;
    }
    #comments li:last-child {
    	border-bottom: none;
    }
    #comments li:first-child {
    	border-top: none;
    	padding-top: 10px;
    }
    #archives li:last-child {
    	border-bottom: none;
    }
    #archives li:first-child {
    	border-top: none;
    	padding-top: 10px;
    }
    From the above code, the only part that works is the first-child part of the #categories id. I am sure that I have made some sort of typo or something, but I can't seem to figure it out. I would appreciate any help.
    Last edited by tua33450; 12-06-2011 at 04:57 PM. Reason: Mark as Resolved

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Close your <a> tags

    Edit: By the way, this would accomplish the same thing:
    Code:
    .tabmain li:last-child {
        border-bottom: none;
    }
    .tabmain li:first-child {
        border-top: none;
        padding-top: 10px;
    }
    Last edited by Snookerman; 12-16-2011 at 01:02 PM.

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    tua33450 (12-06-2011)

  4. #3
    Join Date
    Aug 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much! I knew it would be a stupid mistake. And thanks for the simplified code, I'll definitely use that instead.

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
  •