0

I am trying to do something like this in Angular:

css

header-wrap[icon="taco"] icon-element {margin: 1rem;}

HTML

<header-wrap icon="taco">
 <icon-element></icon-element>
</header-wrap>

But it will not work. Are attribute selectors "end of the road" selectors? Meaning you cannot select things after it? The strange part is that when I use document.querySelectorAll in chrome inspector it returns the element I want, but any attempt to write a style for this case fails.

Lucas Kern
  • 33
  • 1
  • 7
  • By default, you can only access style of the component directly from that component. For more details, read the docs about [view encapsulation](https://angular.io/guide/view-encapsulation). You could either disable that (which I would advise against) or pass styling as part of the `@Input` or `@HostBinding`. – TotallyNewb Jul 26 '21 at 16:15
  • Another options futhermore use your styles.css -the .css that is applied to all the app-:https://stackoverflow.com/questions/68443318/how-can-i-style-my-child-components-from-parent/68443521#68443521 – Eliseo Jul 26 '21 at 17:11

1 Answers1

1

I tested your code and it works on my side! Your CSS code is right and it targets well the element you want.

The problem would apparently be that your tag icon-element is empty. When I added some text in it the CSS changes occurred.

Klaymant
  • 158
  • 5