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.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  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
  •