Scipion Scipion - 1 month ago 15
CSS Question

Using host direct children in CSS with Angular4

In my app.component.css I have the following:

* ~ * {
margin-top: 24px;
}


which does apply some margin-top to all elements following the first one.
This is not quite what I want, as I only need to target the direct children of my host.
So I did the following :

:host > * ~ :host > * {
margin-top: 24px;
}


Unfortunately that doesn't do anything. What am I missing here ?

Answer Source

You only need one :host > — the sibling combinator will relate the two * selectors for you:

:host > * ~ *

This reads as

Select any element
that is a following sibling of any element
that is a child of the host element.

... which implies that the subject of the selector is a child of the same host element as the element that it follows, since that's what the word "sibling" means.