12 Replies
gives every child of .flow a top margin, used for fluid spacing but first child*
you will also see .flow > * + * {}
one question more :
.class > * + * => all children and not the first ?yup, both the
* + * and :not(:first-child)) accomplish the same thingAhhha, Ok thanks bro 
what is value of
what is value of var(--flow-spacer, 1em); ?not() has lower specificity right Kevin? :where(:not()
* has no specificity, so .class > * + * is 0,1,0.
:not() doesn't impact specificity itself, but what's inside it does (so :first-child does count, which is the same as a class selector) but if you use the :where() in there, it doesn't no longer adds it, which is why I throw it in there...
People always tell me * + * is unreadable, but I've run into issues with wanting to adjust the margin on one element inside a .flow and not being able to because of .flow > :not(:first-child), which is why I do it with :where() now.
tl;dr
.class > * + * === 0,1,0
.flow > :not(:first-child) === 0,2,0
.flow > :where(:not(:first-child)) === 0,1,0interesting
And why is this
* + * used instead of adding a new class in the first child only?Well, the idea is we're removing all margins to start, so flow is adding them back in (on only the top, or you could flip it and have it only be on the bottom). The issue then is, it can throw off the balance of things, so you need to remove the margin-top from the top one (or margin-bottom from the bottom one).
Having to do both becomes too easy to forget. Throw a class on there and be done with it 😄
Now I understand. But why is this
var(--flow-spacer, 1em) added instead of a number or any unit?allows you to modify it if needed. As long as
--flow-spacer is undefined, then it'll default to 1em, but if ever you want to adjust it, you can in two ways:
or
So, you use such as if you want the variable to be in a different place with a different value, and if it does not exist, it puts the default value in the second parameter and Thanks , you made me comfortable.