anyone knows why the second css rule is not overwriting the first?

7 Replies
Coder_Carl
Coder_Carl2y ago
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
// specificity 0, 1 , 2
.flex > h1 + p {
border: 1px solid red;
}
// specificity 0, 1 , 0
.flex > * + * {
border: 1px solid blue;
}
// specificity 0, 1 , 2
.flex > h1 + p {
border: 1px solid red;
}
// specificity 0, 1 , 0
.flex > * + * {
border: 1px solid blue;
}
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
Aozen
Aozen2y ago
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?
Coder_Carl
Coder_Carl2y ago
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
Aozen
Aozen2y ago
who comes up with these names XD
Coder_Carl
Coder_Carl2y ago
ah, sorry its a lobotomized owl not discomboluated
Coder_Carl
Coder_Carl2y ago
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…
Aozen
Aozen2y ago
still who comes up with these names
Want results from more Discord servers?
Add your server