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-content padding>
     <ion-card *ngFor="let job of jobs" class="job-card">

        <button ion-item>


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>


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.