Grow your CSS skills. Land your dream job.

first-child issue

  • # August 18, 2012 at 1:08 am

    I have four columns in my page structured like so




















    I created a css rule to spread them out with 28px left margin. I need the first one to have zero left margin. So I tried


    #content .columns:first-child {
    margin-left: 0;
    }

    It’s not working. How can I select that first div that will work cross browser?

    # August 18, 2012 at 1:21 am

    Your first child has a class name of ‘column’, not ‘columns’. That’s why it’s not working.

    # August 18, 2012 at 1:37 am

    sorry, that was a typo

    # August 18, 2012 at 2:16 am

    It should be working fine. Do you have a link? Or even pasting the exact code could help.

    Remember that when using first-child the element you are selecting must be the actual first child of your #content container. For example, if you had a header tag before the first .columns div, .columns:first-child will never be true.

    # August 18, 2012 at 2:33 am

    Ok, I understand now. That is what was happening. I had other things in the container. So I am trying to add another layer to better target the container.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".