第一个孩子的CSS没有得到应用

Question

I need to increase the height of the 1st panel which is in ng-repeat

Code

<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
    <div class="row">
        <div class="col-xs-1">
            <a style="cursor:pointer">
                {{candidateInfo.name}}
            </a>
        </div>
    </div>
    <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div>
</div>

Here i have applied css to the class .panel-height as below

.panel-height:first-child {
    height: 500px;
}

Here the css is not getting applied , I cannot figure out where im going wrong . Any help would be appreciated.

Answer 1

Add a class to 'panel-heading' only when the div satisfies $first and then add height to the class name 'firstChild'.

 <div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails"> <div class="panel-heading" ng-class="{'firstChild':$first}"> <!-- Try this line --> <div class="row"> <div class="col-xs-1"> <a style="cursor:pointer"> {{candidateInfo.name}} </a> </div> </div> <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div> </div> 

Answer 2

It should work, well try this,

.panel-height:nth-child(1) {
    height: 500px;
    background:#ccc;
}