For “adjacent siblings of all direct children of the element”, it does not include the first child?
In the first example, the first child element is green but I thought you mean > * + * will make all of the children background of salmon. Am I mistaken?
Yes, > * + * skips the first child. If you wanted to select ALL children, you'd just need > *. The reason I think > * + * is so great tho is the example of adding margins that create essentially a gutter between elements without the unwanted space above or below your root component.
The added bonus of doing it this way without the a :not() or :first-child is you don't add to the specificity so it's easier to override with a single class if needed.
Let me know if that makes sense. I'm not the best at writing about this stuff 😄
Oh okay, I did some googling. So
* is all elements
> is direct children
x + y means y is the adjacent sibling of x, at the same level
So, > * + * I assume it means:
take the sibling of every children, which just so happens that the first element will not be selected.
And this has the effect of adding constant margins between the elements, without needing to fix the top or the bottom element. I think we can use CSS grid to achieve the same effect? Also, I wonder if there is a set of simple selectors that ignores the last child and hence we can apply margin bottom to achieve the same effect...
Cool, something new 🦄
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
For “adjacent siblings of all direct children of the element”, it does not include the first child?
In the first example, the first child element is green but I thought you mean > * + * will make all of the children background of salmon. Am I mistaken?
Yes,
> * + *skips the first child. If you wanted to select ALL children, you'd just need> *. The reason I think> * + *is so great tho is the example of adding margins that create essentially a gutter between elements without the unwanted space above or below your root component.The added bonus of doing it this way without the a
:not()or:first-childis you don't add to the specificity so it's easier to override with a single class if needed.Let me know if that makes sense. I'm not the best at writing about this stuff 😄
Oh okay, I did some googling. So
* is all elements
> is direct children
x + y means y is the adjacent sibling of x, at the same level
So, > * + * I assume it means:
take the sibling of every children, which just so happens that the first element will not be selected.
And this has the effect of adding constant margins between the elements, without needing to fix the top or the bottom element. I think we can use CSS grid to achieve the same effect? Also, I wonder if there is a set of simple selectors that ignores the last child and hence we can apply margin bottom to achieve the same effect...
Cool, something new 🦄