CSS :first child on link class not working

Question

I have these two elements:

<div class="navbar-header">
    <a href="#" class="navbar-brand collapse-award"></a>
    <a href="#" class="navbar-brand collapse-award"></a>
</div>

and I am trying to apply :first-child :last-child on these items, but its not working does first and last child only apply for list items ?

.navbar-header .collapse-award:first-child {
        max-height: 50px;
}

.navbar-header .collapse-award:last-child {
        max-height: 80px;
        margin-top: -10px;
}

it works on any kind of element, but they must be the first/last children of a container. (*but for `height` use the display type must support it*) — Gabriele Petrioli, Mar 06 '15 at 18:57
Possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) (not voting to close though..) — Josh Crozier, Mar 06 '15 at 19:01
they are block elements, they have a navbar-brand class also applied to them, but I just didnt include it because it has nothing to do with my issue. — user979331, Mar 06 '15 at 19:04
Then the rules are either being overridden or you're not showing all of the (relevant) HTML. Please include as much code as possible. — Adrift, Mar 06 '15 at 19:07

score 1 · Accepted Answer · answered Mar 06 '15 at 19:04

See for a workin example: http://codepen.io/anon/pen/QwVErQ

<div>
   <a href="#" class="collapse-award">item 1</a>
   <a href="#" class="collapse-award">item 2</a>
</div>

.collapse-award:last-child {
    max-height: 80px;
    margin-top: -10px;
    color:#FF0000;
}
.collapse-award:first-child {
    max-height: 50px;
    color:#00FF00;
}

score 0 · Answer 2 · answered Mar 06 '15 at 19:00

0

CSS :first child on link class not working

2 Answers2