Overriding component's auto generated childrens css; Angular

Question

In Angular, there is an ui-select component which is generating spans for it's visual:

as you can see this span has auto-assigned css class of ".btn" which is coloring component to a certain color - the color of all sort of buttons through the application.

What I need is to override this through drop down is not a button and thus it need not to look like one.

In order to override this, I have assigned "search_drop" class to the parent div with an !important attribute, as you can see.

css definition for "search_drop" is:

.search_drop {
    font-family: HPSimplified, Arial !important;
    color: black;
    background: none !important;
}

Result is however the same.

Can you, please, advice how to override the span's style? The .btn css class needs to stay unchanged.

Thanks!

Answer 1

try

.search_drop .ui-select-match .btn {
    font-family: HPSimplified, Arial !important;
    color: black;
    background: none !important;
}

to get the right level of specificity.

This will only affect .btn classes within the ui-select components