css - How to style parent li from child div, using Angular syntax? -

http://codepen.io/leongaban/pen/kpzxkg?editors=110

i'm trying add border style li contains div class. in case .text-trans-normal.

is there conditional exists accomplish this?

the codepen above example, below actual markup angular syntax involved:

<ul ng-show="loadingtickersdone" class="tickers-list">      <li ng-repeat="ticker in tickers"         id="{{ticker.ticker}}"         ng-hide="ticker.removed"         ng-class="{'selected':ticker.selected}">          <div class="ticker"              ng-click="unselectall(); selectticker('top', ticker); ticker.selected = !ticker.selected;"              ng-class="{'text-trans-normal' : ticker.ticker == 'all'}"              ng-if="ticker.ticker != 'all'"              >              {{ticker.ticker}}         </div>      </li> </ul> 

css

.button {   float: left;   overflow: hidden;   position: relative;   margin: 0 10px 10px 0;   padding: 9px 10px;   width: auto;   cursor: pointer;   text-transform: uppercase;   clear: both;   color: white;   border: 1px solid #ccc;   background: gray;   border-radius: 5px; }  .text-trans-normal {   text-transform: initial !important;   /* border-bottom: 1px solid black; */ }  li.text-trans-normal {   border-bottom: 1px solid black; } 

i know use li:first-child in case, there reason why can't that, looking different solution here.

this easy problem solve using angularjs

ng-class="{'selected' : ticker.selected, 'all-top-li' : ticker.ticker == 'all top'}"

basically using ng-class conditional, full ng-repeated block:

<ul ng-show="loadingtickersdone" class="tickers-list">     <li ng-repeat="ticker in tickers"         id="{{ticker.ticker}}"         ng-hide="ticker.removed"         ng-class="{'selected' : ticker.selected, 'all-top-li' : ticker.ticker == 'all top'}">          <div class="ticker"              ng-click="unselectall(); selectticker('top', ticker); ticker.selected = !ticker.selected;"              ng-class="{'text-trans-normal' : ticker.ticker == 'all'}"              ng-if="ticker.ticker != 'all'"              >              {{ticker.ticker}}         </div>      </li> </ul>