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?

SW4 · Accepted Answer · 2014-08-04 09:41:29Z

7

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.

answered Aug 4, 2014 at 9:41

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marcel Over a year ago

Oh, and I have to add !important ... then is it working

Fizer Khan · Accepted Answer · 2014-12-01 11:18:51Z

3

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;
}

answered Dec 1, 2014 at 11:18

Fizer Khan

93.7k30 gold badges147 silver badges156 bronze badges

Collectives™ on Stack Overflow

ionic overwrite active element css style

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related