Select all elements of class A that come before element of class B

Question

I want to select all elements with class .rating__icon--star1 which come before .rating__input1:checked. I want to do this in CSS.

<div class="rating-group1">

          <label aria-label="1 star" class="rating__label1" for="rating1-1">
            <i class="rating__icon rating__icon--star1 fa fa-star" style="color: orange"></i>
          </label>
          <input class="rating__input1" name="rating1" id="rating1-1" value="1" type="radio"
            [(ngModel)]="this.minStars">

          <label aria-label="2 stars" class="rating__label1" for="rating1-2">
            <i class="rating__icon rating__icon--star1 fa fa-star"></i>
          </label>
          <input class="rating__input1" name="rating1" id="rating1-2" value="2" type="radio"
            [(ngModel)]="this.minStars">

          <label aria-label="3 stars" class="rating__label1" for="rating1-3">
            <i class="rating__icon rating__icon--star1 fa fa-star"></i>
          </label>
          <input class="rating__input1" name="rating1" id="rating1-3" value="3" type="radio"
            [(ngModel)]="this.minStars">

          <label aria-label="4 stars" class="rating__label1" for="rating1-4">
            <i class="rating__icon rating__icon--star1 fa fa-star"></i>
          </label>
          <input class="rating__input1" name="rating1" id="rating1-4" value="4" type="radio"
          [(ngModel)]="this.minStars">

          <label aria-label="5 stars" class="rating__label1" for="rating1-5">
            <i class="rating__icon rating__icon--star1 fa fa-star"></i>
          </label>
          <input class="rating__input1" name="rating1" id="rating1-5" value="5" type="radio"
          [(ngModel)]="this.minStars">
</div>

For example, this line of CSS gives me all the elements that come after .rating__input1:checked

.rating__input1:checked ~ .rating__label1 .rating__icon--star1

I want to do the opposite. Instead of selecting the elements come after the checked input, I want to get the elements that come before the checked input

There is a hack here: https://stackoverflow.com/a/36118012/4813913 — m4n0, Aug 28 '19 at 17:20

score 1 · Accepted Answer · answered Aug 28 '19 at 16:41

1

Select all elements of class A that come before element of class B

It is imposible to do by CSS, because in CSS you can select element on right or bottom from current.

answered Aug 28 '19 at 16:41

hisbvdis

1,376
1
8
11

Select all elements of class A that come before element of class B

1 Answers1