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

CodePen

...

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

// 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

AozenOP•3y 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•3y 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

AozenOP•3y ago

who comes up with these names XD

Coder_Carl•3y ago

ah, sorry its a lobotomized owl not discomboluated

Coder_Carl•3y ago

https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

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…

AozenOP•3y ago

still who comes up with these names

Gaming

Programming

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