CODEWITHSUNDEEP
htmlcss
Liron Harel
Liron Harel

Reputation: 11247

CSS first-child doesn't work for the second time

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.

Upvotes: 1

Views: 188

Answers (3)

Huangism
Huangism

Reputation: 16438

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/

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

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.

Upvotes: 1

TheFrozenOne
TheFrozenOne

Reputation: 1715

#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 */
}

Upvotes: 3

Related Questions