CSS specificity with the * selector

Question

I have a css reset where I put margin to zero. Then further down the code I want to add a margin-bottom to all the elements. But it isn't working and I can't find out why.

I have tried to use the !important rule but that isn't working either and not really the solution I'm after. In my head the specificity should work because they both have the specificity 0,0,1 and the last rule should apply.

Or is it like that the * rule has specificity 0,0,0 and doesn't "beat" the specificity of the others selectors after html and body tags because they have specificity 0,0,1?

html,body,address, article, aside, footer, header, h1, h2, h3, h4,
h5, h6, hgroup, main, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body > * {
    margin-bottom: calc(1 * var(--line-height));
}

The result I'm after is that the body > * should apply.

Did you test if this works without calc, using something like 15px? — Azametzin, Jul 19 '19 at 18:20
The code that you present in the question should work. There is nothing wrong with it. The issue is elsewhere. — Azametzin, Jul 19 '19 at 18:29

score 2 · Answer 1 · answered Jul 19 '19 at 19:07

2

If you want to target all elements you can use

* {
   margin-bottom: 1rem;
}

The > symbol is a child combinator, it will only target elements that are direct descendants of the first element.

My guess is that is styling the targeted elements but that these are not the elements you expect to be targeted.

To better visualize this, try and style the border of these elements intstead:

body > * {
    border: 10px solid red;}

answered Jul 19 '19 at 19:07

Steven Kuipers

809
7
19

The problem is that I can't use only the * because it has a specificity of 0,0,0, so the reset rules will have a higher specificity and be applied as style. – hbrovell Jul 19 '19 at 19:44
Yeah, you are correct, * has a specificity of 0 so the html,body... declaration will have precedence. So you can either: 1) use !important in the universal selector. Contrary to what you stated this will work but I would advise against it because it will make it impossible to add any other styling to bottom margins. 2) If you have access to the reset and can change it. Adjust the margin rule in the reset to not include margin-bottom. 3) If you don't have access to the reset, copy the declaration and override it. Because it is further down in the document that declaration will be applied. – Steven Kuipers Jul 20 '19 at 18:33
I fixed it by using `body *` instead of `body > *` Don't fully understand why it is working because both rules have the same specificity. But I guess it has to do with that I'm now targeting all elements under the body tag and not only those that are a direct child of the body tag. – hbrovell Jul 21 '19 at 14:01

CSS specificity with the * selector

1 Answers1