CSS的第一个孩子第二次不工作

Question

I have this HTML:

  <div class="row">
         <div id="sidebar" class="column large-2 medium-3">
             <div class="row">
               test
             </div>
         </div>
         <div id="rightside" class="column large-10 medium-9">
             <div class="row">test2</div>
         </div>
    </div>

And this CSS:

#rightside:first-child{
 border-bottom:solid 1px @main_color;
text-align:center;

}
#sidebar:first-child{
   border-bottom:solid 1px @main_color;
    text-align:center;
}

I'm using Zurb Foundation 5. The sidebar first-child works, but the one for the #rightside elements does not. Any idea why?

I've inspected the element #rightside and I can't see the CSS selector that I've applied in the inspector in Chrome. It seems that it doesn't recognize that selector for some reason.

I have nothing else in the CSS code, just this.

Answer 1

#rightside div:first-child 
{
  /* styles */
}

#sidebar div:first-child 
{
  /* styles */
}

This way you apply your styles to the first DIV inside of #rightside and #sidebar .

Because of comments : this will only work if your first-child is actually a div, if you want to style the first-child regardless of it's type you can use:

#sidebar :first-child
{  
  /* styles */
}

Answer 2

For #rightside:first-child to work, the div with ID rightside would need to be the first child of the parent, as the div with ID sidebar is.

Given that you're using IDs, the div with ID rightside should be the only one in your HTML so the selector you'd use would be simply #rightside .

Answer 3

You need this https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

This targets the first type of a particular element, in your case it is a div

#rightside div:first-of-type {
    background-color: red;
}

http://jsfiddle.net/w0wprkb0/