Sass/CSS/Angular 1 - Select element same level into ng-class allowed class

Question

<button>
  <span>Search</span>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
</button>

I want to select the span element if fa-spinner is allowed (by default fa-search which is taken) In case the span element is below element i we can do:

HTML :

<button>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
  <span>Search</span>
</button>

CSS :

.fa-spinner {
  font-size: 18px;

  & ~ span {
    padding-left: 10px;
  }
}

How to reproduce the same result on the first HTML example ?

why don't you use `"$ctrl.pending ? 'fa-spinner' : 'fa-search'"` to add extra class to `span` for your styling needs? — Rajeev Ranjan, Dec 26 '17 at 11:36
@RajeevRanjan yes we can do that, but I would like to avoid adding an additional ng-class — Mouad Ennaciri, Dec 26 '17 at 11:37
https://stackoverflow.com/a/1817801/3953479 this might help you. — Rajeev Ranjan, Dec 26 '17 at 11:47
@RajeevRanjan yes +1, i will add another ng-class on the `span` element — Mouad Ennaciri, Dec 26 '17 at 12:26

score 2 · Accepted Answer · answered Dec 26 '17 at 14:08

As selecting the previous sibling is not possible in CSS as explained here

Best possible way to use ng-class similar to i for span as shown below:

<button>
    <span  ng-class="$ctrl.pending ? 'left-padding' : ''">Search</span>
    <i class="fa"
    ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
    aria-hidden="true">
    </i>
</button>
//css
span.left-padding 
{
    padding-left: 10px;
}

Sass/CSS/Angular 1 - Select element same level into ng-class allowed class

1 Answers1