ionic overwrite active element css style

Question

I'd like to change the css style of an activated element.

Here's a ionic-list you can see.

I tried to set the css style of the aktivated element like this:

.item-content.activated{
    background-color: rgba(0,100,255, 0.5);
} 

That doesn't change anything

In the css-framework of ionic I have this line that sets the style of the activated elements:

.item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated      
{
   border-color: #ccc;
   background-color: #D9D9D9; 
}

If I change it in the framework, it works. But I only want it to be applied on list items and in my own css-stylesheet ... How can I do that?

Answer 1

You need to use the selector:

.item .item-content.activated

It has the additional .item so more specificity which is why it is overriding the one you have written.

Answer 2

You can do it as follows

.item.active,
.item.activated,
.item-complex.active .item-content,
.item-complex.activated .item-content,
.item .item-content.active,
.item .item-content.activated {
    color: #493F0B;
    font-weight: bold;
    border-color: #eee;
    background-color: #fafafa;
}