Does `> div` have a higher importance than anything else in CSS?

Question

I have a container, single-post-container and to each div inside of it, I assing a padding and a margin, which should be modified by any rules that come after it. On line 2700, I have:

.single-post-container > div {
    padding: 0 0 48px 0;
    margin-bottom: 48px;
}

But then, on line 2900 (which should override it), I have:

.no-related-posts {
    padding: 48px;
}

Nothing happens. The no-related-posts class simply gets behind the > div rule and it's not applied, even if, within the CSS document, it's ahead of it.

.single-post-container > div {
    padding: 0 0 48px 0;
    margin-bottom: 48px;
}

.no-related-posts {
    padding: 48px;
 }

<div class="single-post-container">
    <div class="post-content">
        Hello, just testing.
    </div>
    <div class="no-related-posts">
        Related Posts.
    </div>
</div>

What's the issue here?

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Daniel A. White, Jun 17 '18 at 14:03
@DanielA.White That's legitimately all the code there is to this issue. — coolpasta, Jun 17 '18 at 14:03
i dont know how these classes are applied in your html - that would help. — Daniel A. White, Jun 17 '18 at 14:04

score 1 · Accepted Answer · answered Jun 17 '18 at 14:08

1

this should be the solution, try it:

.single-post-container > div.no-related-posts {
    padding: 48px;
}

answered Jun 17 '18 at 14:08

DaFois

2,121
8
21
35

Thanks, works like a charm and I can see why. – coolpasta Jun 18 '18 at 06:15

Does `> div` have a higher importance than anything else in CSS?

1 Answers1