Using host direct children in CSS with Angular4

Question

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 ?

The styles of your component are about styling the component itself, not siblings or other components outside the current component. So I don't think this is even supposed to work. You would need to add this style to the parent component. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 16, 2017 at 12:20
Can you please try to explain better what you exactly want to happen, instead (or in addition to) what you not want? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 16, 2017 at 12:22
I think you need to replace the 2nd :host with the actual selector (tag name) of your component. I don't know how to address the direct children of a component, because you need to use ::ng-deep to pierce through the component boundary and use > to address direct children. I don't know if and how these can be combined. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 16, 2017 at 12:26

BoltClock · Accepted Answer · 2017-08-16 12:26:11Z

1

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.

answered Aug 16, 2017 at 12:26

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Günter Zöchbauer Over a year ago

To me it looks like he tries to address recursive children (childs are the same component types as current component) but it's not really clear.

BoltClock Over a year ago

@Günter Zöchbauer: "This is not quite what I want, as I only need to target the direct children of my host." I read that as the asker wants to apply the * ~ * logic only to children of the host element. Seems fairly clear to me.

Scipion Over a year ago

The answer was exactly what I was looking for. Cheers to both of u

Collectives™ on Stack Overflow

Using host direct children in CSS with Angular4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related