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;
        }
    }
}

I'd rather you not nest CSS that way. If you'd like to access the p selector in the div class, you can do something like this: https://jsfiddle.net/L4f0o6av/1/ Also, you can check this article about nesting: https://www.w3schools.com/css/css_combinators.asp — Jack Doe, Feb 01 '20 at 08:16
In the absence of any other CSS, the p would indeed inherit the font size and colour of the div, so apparently you have other css as well, which sets the p. — Mr Lister, Feb 01 '20 at 08:19
Or, it may be a caching problem; the browser could be looking at an older version of the stylesheet. Clear your cache and reload. — Mr Lister, Feb 01 '20 at 08:23
@MrLister you are right. I have just checked the resulting css code and yes, it should work like OP has defined. So I have deleted my answer because I was wrong. Thanks to pointing that out. — MattOpen, Feb 01 '20 at 09:14

score 2 · Accepted Answer · answered Feb 08 '20 at 12:47

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.

score 1 · Answer 2 · answered Feb 08 '20 at 13:16

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>

Thanks for pointing out the issue with my BEM. I am still confused and don't know how to rightly use BEM. Can you suggest some good read on this topic? — Y.R, Mar 03 '20 at 04:33
@Y.R Lots of resources out there, have a look through this and see if it helps your understanding https://css-tricks.com/bem-101/ — codeth, Mar 08 '20 at 12:45

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

2 Answers2