Applying style using css selectors not working

Question

I'm using a loop to display my list.

<span v-for="freefeature in freefeatures" v-bind:key="freefeature">
   <i class="fa fa-check-circle free-icons"></i>
   <p>{{freefeature}}</p>
 </span>

I want the first i (icon) to be of orange color and rest to be of grey color.

I'm using this loop at multiple places without the free-icons class on i where all the icons need to be orange only at this place they need to be grey except for the first one hence the class "free-icons"

What I've tried:

 span i {
     color: orange; }

    span:nth-child(n+2) i.free-icons {
     color: #333;
}

Just to check even first-child selector or any other css selector in that case doesn't work. What I might be doing wrong?

when v-for is applied to span, the span will be repeated. So, we should select through a wrapper element. That is safe. Check my answer. — Geetanjali
– Geetanjali, Commented Jan 1, 2020 at 12:21
@StringSet please check what this loop of your's give you as rendered DOM set on the page, first and then write your CSS accordingly. As you said you're using this loop set at multiple places on your page but class free-icons is found only in this specific case, then do color: orange on all i's and then override the same with color: gray if free-icons class is there except for the first child in the relevant rendered DOM set. I think this would do the trick for you. — Ddmteetu
– Ddmteetu, Commented Jan 1, 2020 at 14:23

Pedram · Accepted Answer · 2020-01-01 12:02:32Z

Well, use nth-child(1) or first-child to get first i , change your css logic, make first one orange and other gray

span i {
  color: #333;
}

span i.free-icons:first-child {
  color: orange;
}

<span v-for="freefeature in freefeatures" v-bind:key="freefeature">
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
   
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
   
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
 </span>

Update: alternate logic is using :not, exclude first child like this:

span i.free-icons:not(:first-child) {
  color: #333;
}

span i {
  color: orange;
}

<span v-for="freefeature in freefeatures" v-bind:key="freefeature">
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
   
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
   
   <i class="fa fa-check-circle free-icons">X</i>
   <p>{{freefeature}}</p>
 </span>

Pedram · Accepted Answer · 2020-01-02 07:57:53Z

0

The best solution is to have a wrapper element and then select the span through it

span i {
  color: #333;
}

.wrapper span:first-child i.free-icons {
  color: orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />


<div class="wrapper">
  <span>
     <i class="far fa-check-circle free-icons"></i>
     <p>Feature1</p>
   </span>

  <span>
     <i class="far fa-check-circle free-icons"></i>
     <p>Feature2</p>
   </span>


  <span>
     <i class="far fa-check-circle free-icons"></i>
     <p>Feature3</p>
   </span>


  <span>
     <i class="far fa-check-circle free-icons"></i>
     <p>Feature4</p>
   </span>
</div>

edited Jan 2, 2020 at 7:57

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

answered Jan 1, 2020 at 12:20

Geetanjali

4684 silver badges13 bronze badges

1 Comment

Pedram Over a year ago

v-for loop all data inside span not span, so span is a wrapper here. It's vue.js thing!

Collectives™ on Stack Overflow

Applying style using css selectors not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related