SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selecting child links

    So, I have styled some links, but I want to style the last 3 differently, but I'm having issues. The CSS that is working is marked below along with the CSS that isn't working. I'm working on the site locally, but may have the site up tomorrow if this code isn't sufficient. thx

    <section id="column2">

    <ul>
    <li> <a href="#">Bankruptcy Services</a> </li>
    <li> <a href="#">Chapter 7 Bankruptcy</a></li>
    <li> <a href="#">Chapter 13 Bankruptcy</a> </li>
    <li> <a href="#">Stop a Foreclosure</a> </li>
    <li> <a href="#">Reaffirm your car</a> </li>
    <li> <a href="#">Hault Wage garnishment</a> </li>


    </ul>
    </section> <!--column2-->


    CSS that is working

    #column2 ul li a {
    text-decoration:none;
    list-style-type:none;
    display:block;
    background-color:rgba(18,17,17,.70);
    padding:1em 1.5em;
    font-size:1.5em;
    color:#FFFFFF;
    margin-bottom:.5em;
    text-align:center;


    }

    CSS that isn't working to target the last 3 links differently:

    #column2 ul li a:nth-child(n+4) {
    text-decoration:none;
    list-style-type:none;
    color:#FFFFFF;
    margin-bottom:.5em;
    text-align:center;
    border:.15em #2b6b8f solid;


    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Code:
    #column2 ul li a:nth-child(n+4) {
    That code is saying "style all of the <a> elements inside a list item from number 4 onwards". But there is only one <a> element inside each list item. So each <a> is a first child.

    So you want this instead:

    Code:
    #column2 ul li:nth-child(n+4) a {
    That is, style the <a>s inside the fourth list item onwards.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx that makes perfect sense and it worked very very nice. I searched for this for a while, but couldn't find anyone addressing this styling.


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
  •