CODEWITHSUNDEEP
javascriptangularjscss
user526206
user526206

Reputation:

How to change background color on condition

I am using following style to show div in my page as even odd combination: css:

.task-container:nth-child(even) {
    background: none;
}

.task-container:nth-child(odd) {
    background: rgba(2, 104, 144, .05);
}

.timeout {
    background-color: #ffc;
}

In HTML. I am using div in ng-repeat:

<div class="task-container">
    ... other divs
</div>

With some conditions i want to change the background color like yellow but it is not working as nth-child(even)/odd overriding the yellow color. I tried something like that:

<div class="task-container" data-ng-class="{'timeout': alarm.timeOutOccured== true}">

Can someone help me to find a correct way?

Upvotes: 2

Views: 3304

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Assuming the .timeout class is being added properly on your div element, you just need to add the !important in your CSS:

.timeout {
    background-color: #ffc !important;
}

This is because, the .task-container:nth-child(even) or .task-container:nth-child(odd) is more specific so it will get higher priority.

Also, it is not recommended to use !important so you can write more specific selector like this (and you don't need !important flag):

.task-container.timeout {
    background-color: #ffc;
}

See a simplified example below:

.task-container:nth-child(even) {
  background: none;
}
.task-container:nth-child(odd) {
  background: rgba(2, 104, 144, .05);
}
.task-container.timeout {
  background-color: #ffc;
}
<div class="task-container">
1
</div>
<div class="task-container">
2
</div>
<div class="task-container timeout">
3
</div>
<div class="task-container">
4
</div>
<div class="task-container">
5
</div>
<div class="task-container">
6
</div>
<div class="task-container timeout">
7
</div>

Upvotes: 3

Related Questions