Q:

ionic overwrite active element in css

I tried many example answer from the stackoveflow but no one is useful in my application
Please help me solve my problem 
thank you so much 
sideMenu:
<ion-list class="side" id="sideMenuActive">
  <ion-item menu-close href="#/sideMenu/home">
    <i class="icon ion-ios-home-outline"></i>&nbsp; HOME
  </ion-item>
  <ion-item menu-close href="#/sideMenu/myDeal">
    <i class="icon ion-compose"></i>&nbsp; PROFILE
  </ion-item>
</ion-list>

CSS:
#sideMenuActive .active{background: #000000 !important;}

A:

The ion-item directive injects a "a" element in its content. This is the element you need to use when you define your styles.
<ion-list>
    <ion-item ui-sref=".item1" ui-sref-active="active">Item 1</ion-item>
    <ion-item ui-sref=".item2" ui-sref-active="active">Item 2</ion-item>
</ion-list>

CSS:
ion-list ion-item.active  a {
    background-color: #000 !important; 
}

NB: you have to add (at some place) the "active" class to your active ion-item. I did it by using the directive ui-sref-active. 
Please also mind that Ionic use Angular-UI router and thus you'd better use ui-sref instead of href for your links. ui-sref allows you to directly give the name of a route as a parameter (thus, you don't have to handle any URI).

