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

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.

First child only targets the first child of the parent, regardless of element. Look here http://stackoverflow.com/questions/24657555/css-first-child-versus-first-of-type The sidebar works because the sidebar is the actual first child of the parent — Huangism, Apr 20 '15 at 15:16
@Huangism Thanks, how can I solve this. Any answer/example. Thanks in advance. — Liron Harel, Apr 20 '15 at 15:17
What are you trying to target? If you are trying to get `rightside` then just use `#rightside` — Huangism, Apr 20 '15 at 15:18
I try to border the first div child inside both #rightside and #sidebar — Liron Harel, Apr 20 '15 at 15:19
Then you need a space `#rightside :first-child { }` that will target the first child, if you need the div then you need to look at the question I linked which targets by type — Huangism, Apr 20 '15 at 15:20

TheFrozenOne · Accepted Answer · 2015-04-20T15:25:21.253

3

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

edited Apr 20 '15 at 15:25

answered Apr 20 '15 at 15:20

TheFrozenOne

1,695
9
19

`div:first-child` does not guarantee it will target a div – Huangism Apr 20 '15 at 15:21
It works' I put . instead of :. Thanks!. It's like reading it from right to left: the first child DIV of the #sidebar. – Liron Harel Apr 20 '15 at 15:21
If your code has stuff before the div then it will not work, you need https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type – Huangism Apr 20 '15 at 15:22
1

@Huangism This applies only if the first-child is a div, thats correct. I thought that was what he wanted to achieve. – TheFrozenOne Apr 20 '15 at 15:24
@Doodlebunch having that `div` in front of the `:first-child` is pointless – Huangism Apr 20 '15 at 15:25
@Huangism It's not, sorry. In some cases you need it. – TheFrozenOne Apr 20 '15 at 15:26
@Doodlebunch Thanks, answer accepted. Clear and easy to understand for a newbie like me. – Liron Harel Apr 20 '15 at 15:31
1

Depending on how the rest of the HTML is structured, a child selector (`#rightside>div:first-child`) may be needed here to avoid the styles being to every `div` within `rightside` that happens to be the `:first-child` of its parent. – Shaggy Apr 20 '15 at 15:33

Shaggy · Answer 2 · 2015-04-20T15:25:31.990

1

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.

edited Apr 20 '15 at 15:25

answered Apr 20 '15 at 15:19

Shaggy

6,696
2
25
45

Huangism · Answer 3 · 2015-04-20T15:26:43.037

1

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/

edited Apr 20 '15 at 15:26

answered Apr 20 '15 at 15:26

Huangism

16,278
7
48
74

Thanks, I've read that it's less supported. I think better to use first-child (?) – Liron Harel Apr 20 '15 at 15:26
You can see the support for it on the docs page I linked to see if it fits the bill or not. If your html have other elements before the div, then I would suggest you add a class to the item you want to target because you cannot target it with `div:first-child` – Huangism Apr 20 '15 at 15:28
The DIV will be the first element. – Liron Harel Apr 20 '15 at 15:29

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

3 Answers3