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

Question

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

I'm trying to add a border style to the li that contains a div with a certain class. In this case .text-trans-normal.

Is there a conditional that exists to accomplish this?

The Codepen above was just an example, below is my actual markup with 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 I could use li:first-child in this case, but there is another reason why I can't do that, so looking for a different solution here.

@Brewal ok thanks! I'm using Angular, so I believe I will be able to do that using a `ng-class` conditional on the li. I'm going to update my question with Angular syntax so this can be reopened. — Leon Gaban, Jun 29 '15 at 15:42
There is a relational pseudo-class available in the [Selectors Level 4][1] spec. It would be written as: li:has(> .text-trans-normal) But, Browser support is very scarce, if available at all. [1]: http://dev.w3.org/csswg/selectors-4/ — bboysupaman, Jun 29 '15 at 15:45
I've re-opened it for now but you should update the question **again** stating that you need this *"conditional"*. If it exists, it should be in the Angular documentation. — Paulie_D, Jun 29 '15 at 15:50
@Paulie_D I just accomplished this, will wait a few more minutes before posting the answer, so others have a chance to gain some points. This is really cool, this problem now solved thanks to Angular :D — Leon Gaban, Jun 29 '15 at 15:56

score 0 · Answer 1 · answered Jun 29 '15 at 18:14

This is a very easy problem to solve using AngularJS

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

Basically using a 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>

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

1 Answers1