0

I have to apply to the first child some style but it doesn't work.. can anybody help me?

HTML

<div id="sidebar">
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li class="GLnavBlog"><a href="#">htech blog</a></li>
        <li class="GLnavBlog"><a href="#">sport blog</a></li>
        <li class="GLnavSpecial"><a href="#">geo news</a></li>
        <li class="GLnavSpecial"><a href="#">rss</a></li>
        <li class="GLnavSpecial"><a href="#">upload corner</a></li>
    </ul>
</div>

CSS

#sidebar li.GLnavBlog:first-child a {
    border-top: 1px solid #747577;
}
#sidebar li.GLnavSpecial a {
    text-transform: capitalize;
}
#sidebar li.GLnavSpecial:first-child a {
    border-top: 1px solid #747577;
}
#sidebar li.GLnavSpecial:last-child a {
    border-bottom: 1px solid #747577;
}

FIDDLE

Thank you

EDIT How can I get the border-top at the first .GLnavSpecial?

ferocesalatino
  • 126
  • 1
  • 9
  • Its not `#sidebar li:first-child a {..}` it should be `#sidebar ul li:first-child a { ... }` and vice-versa for other. – vivekkupadhyay Aug 25 '15 at 13:02
  • Duh, comment got auto removed. I had voted to close as dupe because `:first-child` and `:last-child` do not work as you expect it to and the linked thread provides the explanation. If that answer does not help you, please edit the question to add more information. Refer specifically to BoltClock's answer for comprehensive explanation. – Harry Aug 25 '15 at 13:03
  • 1
    @Harry, i don't think that your given link is similar to op's issue. please check op's fiddle with that link's answer given by you and you will find that this question is different..hope you will re open this..thanx..and please don't mark as duplicate till you are not sure.. – Leo the lion Aug 25 '15 at 13:05
  • @Leothelion: In what way does it not answer? The style doesn't get applied for `#sidebar li.GLnavSpecial:first-child a` because it is not the first-child of its parent. I did check it before closing and I don't go closing things without checking. – Harry Aug 25 '15 at 13:07
  • @Harry: sorry but I can't find the solution in the link you suggest. Anyway, I just edit my question – ferocesalatino Aug 25 '15 at 13:10
  • @ferocesalatino: Basically following the details provided in BoltClock's answer, you would need to do it like in [this fiddle](http://jsfiddle.net/hari_shanx/g3hknfmo/4/). I have created it to help you. – Harry Aug 25 '15 at 13:15
  • 1
    Now I understand your answer! thank you! It works great! – ferocesalatino Aug 25 '15 at 13:17
  • @Harry, i don't know why you are not getting my point but ok..sorry for my comment..i wasnt commenting to accuse but to help op...sorry you get me wrong. – Leo the lion Aug 25 '15 at 13:17
  • 1
    @Leothelion: Never mind, maybe I am not able to *hear* your tone and that's the issue. No worries, lets leave it here as OP seems to have understood the answer. I am removing my previous comments to avoid a big chain :) – Harry Aug 25 '15 at 13:18

0 Answers0