CODEWITHSUNDEEP
csssass
Lee Wei
Lee Wei

Reputation: 3

CSS of nested selector is not being applied to div

I utilised the BEM method and my <div> is showing the css from the Block and Modifier, but not the Element

i.e. the css for c-banner(block) and --warning(modifier) is appearing but not __icon(element).

I know that the color of the modifier is appearing because I tried changing it to another color and it appears on the UI.

Eg: Currently:

&--warning {
  color: #D9822B
}

Edited:

&--warning {
  color: black
}

Once changed, the icon of --warning will show up with a black color on the UI.

However, the padding-right of __icon doesn't ever get applied. 

c-banner {
/* Block CSS Properties */

  &__icon {
    padding-right: 12px;

    &--warning { /* Used for warning purposes */
      color: #D9822B;
    }

    &--primary { /* Used for general information */
      color: #137CBD;
    }

    &--success { /* Used for verified access */
      color: #0F9960;
    }

    &--danger { /* Used as a hard stop */
      color: #DB3737;
    }
  }
}

I'm genuinely perplexed as to why the padding-right of __icon does not get applied but the color of --warning is

Upvotes: 0

Views: 113

Answers (1)

dabishan
dabishan

Reputation: 691

All you are missing is: .c-banner ..... the dot before the classname

Also, for padding to work they have to be inside --warning because you are chaining to form the full selector and there is no selector that ends with __icon

You can style material-icons if you want to affect multiple:

.c-banner {

  .material-icons { padding-right: 12px; } 
  /* can also do [class*="__icon"] but may be less predictable */

  &__icon {
    /* rest of the scss */
  }
}

Upvotes: 1

Related Questions