Can't change font size in a flexbox

Hi. I have a problem with changing my font size in div which is a flexbox.
My html piece is: <div class="foot_note"> <p>copyright The Tea Cozy 2017</p> </div>

When I try to change font size like this it doesn’t work: .foot_note { display: flex; margin: 20px; font-size: 10px; }

Yet if I do it like this: .foot_note { display: flex; margin: 20px; } .foot_note p { font-size: 10px; }

then everything works fine. Why is that? I also tried using !important but it has no effect. Those are last lines of my code so nothing is overwritten later.

Hard to help actually. Here’s the example: Edit fiddle - JSFiddle - Code Playground

I was able to successfully change the font size to 10px just by using .foot_note selector.
Please carefully check your code if you really have those rules, and double-check if nothing is overwriting your rules. Maybe you have a caching issue. But it clearly works.

Do you have any styles on your p element? Example below–text would show as 50px because of the p style.

p {
font-size: 50px;
}
.foot_note {
display: flex;
margin: 20px;
font-size: 10px;
}

i double checked everything, i only have a general rule with * changing font size. This also doesnt really tell why !important was not working. I thought that maybe it is because of the flexbox but I don’t know why would flexbox be an issue

Try to reproduce your example on jsFiddle with all the code you got, and let’s see what happens then.

here is the rest of the code. As you can see the problem persists there too

Edit: pictures are not working on fiddle because they were saved locally

I see this is to be expected. The rule that is overwriting your .foot_note selector rules is an asterisk selector ‘*’ that matches every single element on the webpage. So what happened is that you actually defined font-size: 10px; on .foot_note selector, but since paragraph element is a child of div.foot_note element it inherits the font-size from the parent, but it has lowest priority, so asterisk selector is effectively overwriting your font-size: 10px; to font-size: 22px;

What you can do is you can be more specific like → .foot_note p, so then your font-size: 10px; will apply visually. Or you can just remove paragraph tags that wrap that copyright text, so .foot_note rule will directly apply also and it will work.

Let me know if it’s clear and you are able to achieve what you want?

I understand yet I thought that asterix selector would have lowest specificity. One thing that bothers me though is why !important didn’t solve my problem in the first place. Any ideas? I know how to circumvent the problem but I want to understand. Thank You for Your replies!