Why setting div class font-size doesn't set the p element font size?

Question

Here is my html file. I want to change the font size of all p element in the div. So I change the font size of the div containing all paragraphs but it doesn't work. Why?

 <div class="footersection__left--address">
         <p>2</p>
         <p>Melano Park,</p>
         <p>CA</p>
         <p>USA</p>
 </div> 

Here is my SCSS file-

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

Answer 1

The CSS generated from this SCSS:

.footersection {
    background-color: #FFF;
    padding: 6rem;

    &__left{
        font-size: 1.5rem;

        &--address{
            font-size: 5rem;
            color: aqua;
        }
    }
}

Is this CSS:

.footersection {
  background-color: #FFF;
  padding: 6rem;
}
.footersection__left {
  font-size: 1.5rem;
}
.footersection__left--address {
  font-size: 5rem;
  color: aqua;
}

As you can see the p take the font size of the last selector .footersection__left--address .

Look at this CodePen .

Answer 2

As pointed out by @Ale_info, your compiled CSS means that your p tags will inherit font-size: 5rem from .footersection__left--address . Or you have something else in your stylesheets setting the font-size on all p tags.

I also wanted to take the opportunity to tell you that you're using BEM wrong.

-- defines a Modifier class, which should modify an existing Element class, thus should be appended to it. You're using a modifier on its own without the actual base styles for the element.

This is bad BEM:

<div class="footersection">
  <div class="footersection__left--address"></div>
</div>

This is good BEM:

<div class="footersection">
  <div class="footersection__left footersection__left--address"></div>
</div>