Forums

cybershot

I have four columns in my page structured like so


<div id="content">
     <div class="columns">

     </div><!--END columns-->

     <div class="columns">

     </div><!--END columns-->

     <div class="columns">

     </div><!--END columns-->

     <div class="columns">

     </div><!--END columns-->
</div>

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?

TheDoc

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

cybershot

sorry, that was a typo

TheDoc

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.

cybershot

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.

treehouse : what would you like to learn today?

Forums

[Solved] first-child issue