How to access different html tag in scss

Hi guys , I have this piece of code which im trying to style a text in a button:

     <ion-header>
      <ion-navbar>
       <ion-title>Jobs</ion-title>
      </ion-navbar>
     </ion-header>

    <ion-content padding>
     <ion-card *ngFor="let job of jobs" class="job-card">

      <ion-card-header>
        <button ion-item>
        {{job.position_title}}
      </button>
     </ion-card-header>

   </ion-card>
 </ion-content>

this is my scss:

   page-jobs {
   .scroll-content {
     background: #EDEDED;
     }

   .job-card ion-card-header .ion-item {
      font-size: 100px;
    }

The first one .scroll-content is working fine… but the second one is not. I am so confused regarding the method they access html elements. Can someone please provide a link for reading material to learn how to do this.

In this example , I am trying to increase the font , and maybe text color and all that… also want to change the background for the card itself…

     <button ion-item>
        {{job.position_title}}
      </button>

Sass uses standard CSS Selectors, the only difference as far as I know is that you can nest them.

mr mirkonasato, how to access that button ion-item ??

@yasirpanjsheri You can try .job-card ion-card-header button[ion-item] or .job-card ion-card-header [ion-item]. In your HTML ion-item is not a class, but an attribute. You have to keep in mind that other css style may override yours, according to the priority.

1 Like