Ionic 2 Pseudo Classes


Hi everyone!

As part of a test app, I attempted to build a menu that has active item styling. I first tried to use standard CSS Pseudo-class styling to achieve this (:active) which led me to realise that Ionic was applying a background style on top of my own active styling.

After a quick search I found that this is due to the .activated class applied by Ionic to buttons. My question is, are there any resources on these Ionic classes that can be referred to? I don’t see any information on this in the dev documentation and it would be very useful to know exactly how to use all of this additional functionality.

If not, maybe it would be a good idea to create a post on the forums for easy access?


Most of the classes that we dont document aren’t meant for to be changed around.
We have a lot of carful css work done to make things fast and performant.

If you need to customize something, we try to expose everything through sass variables


Thank you very much for that link Mike; I’m not sure how I missed it…

Yes, I didn’t change the theme-default.scss as not only did I not want to edit the imported styles, but I wasn’t sure if this would be affected globally. I simply implemented an overriding CSS class called button.activated.

That SASS variables page is an invaluable reference however. Thank you again.