user526206 user526206 - 3 months ago 9
AngularJS Question

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?

Answer

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>