The issue here is your second class which is telling the browser to set the background to yellow as the !important tag on the end of each property. !important tells the browser to override any other styles that overlap classes. You need to:
A) Remove the important from the yellow styles and apply them to the purple
B) Remove the yellow styles all together.
Option A will seem more ‘logical’ but it depends what environment your working in and how your code etiquette applies to your project. I prefer to keep everything simple and just remove the intrusive css and try and use less !importants in web projects.
For more information on the !important utility visit this helpful blog post: !Important Utility information
Hope this helps.
solved Why one CSS class overrides other? [closed]