Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: nth-child

  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    918
    Thanks
    76
    Thanked 29 Times in 29 Posts

    nth-child

    Hello, have a menu but would like to select the last 2 list items and give these certain css padding values.

    How could I achieve this? Here is my code:

    HTML:
    Code:
    <div id="nav">
                 <ul><li><a href="#" title="Home">Home</a></li>
                     <li><a href="#" title="News">News</a></li>
                     <li><a href="#" title="Members">Members</a></li>
                     <li><a href="#" title="Forums">Forums</a></li>
                     <li></li>
                     <li></li> 
                     <li><a href="#" title="Server">Server</a></li>
                     <li><a href="#" title="Help">Help</a></li>
    	  </ul>
     </div>
    CSS:
    Code:
    @font-face {font-family: ITC Avant Garde Gothic Pro;
                 src: url('fonts/ITCAvantGardePro-Md.otf');} 
    
     @font-face {font-family: ITC Avant Garde Gothic Pro; 
                 font-weight: bold; 
    			 src: url('fonts/ITCAvantGardePro-Md.otf');}
     
    #nav {width: 800px;
          height: 25px;
    	  background-color: white;
    	  position: relative;
          top: -10%;
    	  border-top: 2px solid #a6a6a7;
    	  padding-bottom: 5px;
    	  padding-top: 5px;
    	  border-bottom: 2px solid #a6a6a7;}
     
    #nav ul {list-style: none;
             font-size: 18pt;
    		 color: #006daf;
    		 font-family: "ITC Avant Garde Gothic Pro";
    		 text-transform: lowercase;
    		 margin: 0;
    		 padding: 0 0 0 0px;}
    
    #nav li {display: inline;
             padding: 0 26px;
    		 line-height: 25px;
    		 font-size: 18pt;}
    
    #nav a,
    #nav a:link,
    #nav a:visited {color: #a6a6a7;
                    text-decoration: none;}
    
    #nav a:active,
    #nav a:hover {color: #f7852c;
                  text-decoration: none;}
     
    #nav a.active {color: #9bccea;
                   font-weight: bold;
    			   text-decoration: none;}
    Thank you for any help,

    Regards,

    LC.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    nth-child property of CSS3 is not compatible with IE6, 7 and 8,

    its better way to make it cross browser compatible to make a class and assign it to any element of your list
    See this for compatibility

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    918
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I tried adding classes to my list item but had no change. I suspect the CSS is conflicting with what is already set in the menu css.

    Any solutions to this?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I made a class and assigned it to <a> and <li> ... in both cases it worked here


  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    918
    Thanks
    76
    Thanked 29 Times in 29 Posts
    That must have been where I went wrong because I tried to assign the class to the <li>, then I deleted it and added it to the <a>. Must have to give the class to both elements?

    I'm going to retry this now, thanks.

    Regards,

    LC.

    EDIT: Ah that's worked, thanks very much for your help.
    Last edited by LearningCoder; 09-14-2011 at 10:23 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by LearningCoder View Post
    Must have to give the class to both elements?

    No, you need to assign to any 1 element either <li> or <a>

  • #7
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    918
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I tried doing that in the first instance and nothing changed. As soon as I put the class into both elements, it started working. I'll play about with it a bit more before continuing.

    Regards,

    LC.


  •  

    Posting Permissions

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