How to assign background color to anchor tag based on condition in blazor

Question

I have list of question numbers and below code is for loading question number to list

 TotalQuestionModel.QuestionNUmbers = Enumerable.Range(1, Convert.ToInt32(TotalQuestionModel.TotalQuestionCount)).Select(n => n.ToString()).ToList();

Model Class

public class TotalQuestionCountModel
    {
       
        public int TestID { get; set; }
        public int? TotalQuestionCount { get; set; }
        public List<string> QuestionNUmbers { get; set; } = new();
        public string? QuestionNumber { get; set; }
        public int QuestionNumberStatus { get; set; }
       
    }

Razor code as follows

 <div class="row p-4 no-gutter">                               
  @foreach (var qitem in TotalQuestionModel.QuestionNUmbers)
  {
     <div class="col-4 qust-nums" @onclick="()=>LoadQuestion(Convert.ToInt32(qitem))"><a>@qitem</a></div>       
  }
 </div>

Here, I need to assign different background color for question numbers

1. gray color for Current active question
2. green for attended question number
3. pink for skipped question number

How to assign these colors to question numbers

Currently I am getting this design

I need to get Something like this

Answer 1

You can have three CSS classes for each status

.active{
    background-color: gray;
}

.attended{
    background-color: green;
}

.skipped {
    background-color: pink;
}

And conditionally apply these classes to the questions according to their status

<div class="col-4 qust-nums @(QuestionNumberStatus == 1 ? "active" : QuestionNumberStatus == 2 ? "attended" : "skipped")"><a>1</a></div>  

And you can show status in questions like this

<div class="col-4 qust-nums @(QuestionNumberStatus == 1 ? "active" : QuestionNumberStatus == 2 ? "attended" : "skipped")"><a>@QuestionNumberStatus</a></div>