Applying different styles to header and footer on the same page



I’m having difficulty targeting specific instances of toolbars to change their css styles (I’m a beginner). Specifically in this case I would like to change the background color of the footer differently to the header. The code I currently have changes both.


    <ion-title class="vertical-align-content">
      <img alt="logo" height="40" src="assets/titleLogo.png">
      Saved Items
    <ion-buttons end>
      <button ion-button icon-only (click)="addItem()">
        <ion-icon name="add"></ion-icon>

    <div style="text-align: center">
      <button ion-button color="secondary" outline icon-left>
        <ion-icon name='trash' is-active="false"></ion-icon>
        Delete all


.toolbar-background {
    background-color: #5381A7 !important;