anyone knows why the second css rule is not overwriting the first?
7 Replies
specificity rules are choosing this
the * universal selector is not counted when calculating the specificity of a css rule
where as a type i.e. h1 is
in general lower specificity css is helpful so that you can overwrite rules when needed without having to write an essay dictating the identifier
more information on this sort of thing can be found in the docs
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
thank you
but in the case of this code the specificity can not be changed
if we want the same result right?
would these 2 rules be something we should avoid in actual code?
the discombobulated owl or is a selector I use frequently enough
your other selector... not so much. but the fact that you can write that rule means that it is valid.
so if you have a use case for it... well use it.
But in general I would err against adding more lines of specificity like that. especially when using a generic helper class like .flex
your selector of .flex > h1 + p is finding the direct descendant of .flex that is a h1 and then the p that is it's sibling.
1. you wouldnt have more than 1 h1 on the page.
&&
2. you would probably want any p tag following a heading to have the same margin / padding putting space between them
so you could just do .flex h1 + p
who comes up with these names XD
ah, sorry its a lobotomized owl
not discomboluated
erinlynch
A List Apart
Axiomatic CSS and Lobotomized Owls
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational m…
still who comes up with these names