1

I am trying to set text color depends on li span class name.If span class name is green parent li text color also should be green.If span class name is gray parent li text color also should be gray.How we can do it?

Demo:https://stackblitz.com/edit/angular-gr8adt?file=src%2Fapp%2Fapp.component.css

This question is not duplicate.please understand clearly.

CSS:

   .green{
   color:green;
   }

   .gray{
   color:gray;
   }

   span.arrow < li {
   color:green;
   }

   span.gray < li {
   color:green;
   }

HTML:

          <ul> 
           <li><span class="green"></span>Car</li>
           <li><span class="green"></span>Bike</li>
           <li><span class="gray"></span>Plan</li>
           <li><span class="gray"></span>Cycle</li> 
           </ul>
cinnan
  • 77
  • 1
  • 10

1 Answers1

2

That's correct, but you must put the text inside the span tag

This way

<ul> 
       <li><span class="green">Car</span></li>
       <li><span class="green">Bike</span></li>
       <li><span class="gray">Plan</span></li>
       <li><span class="gray">Cycle</span></li> 
 </ul>
alesssz
  • 328
  • 1
  • 12
  • No..please put the text out of span tag..because i want to change text color depends on span class – cinnan May 09 '19 at 14:23
  • I didn't understand what you mean, then...if you want to change text color starting from span class, this is the correct way. If you change the class of the span tag, you automatically change the color of the text inside tags (class must be controlled in css of course) – alesssz May 09 '19 at 14:25
  • I am dynamicaly changing span class name using li index so i want to show li text color depends on span class name – cinnan May 09 '19 at 14:28
  • span.green:before li { color: green; } – cinnan May 09 '19 at 14:30
  • above css is not working – cinnan May 09 '19 at 14:30