CSS attribute selector with another selector after it

Question

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.

By default, you can only access style of the component directly from that component. For more details, read the docs about view encapsulation. You could either disable that (which I would advise against) or pass styling as part of the @Input or @HostBinding. — TotallyNewb
– TotallyNewb, Commented Jul 26, 2021 at 16:15
Another options futhermore use your styles.css -the .css that is applied to all the app-:stackoverflow.com/questions/68443318/… — Eliseo
– Eliseo, Commented Jul 26, 2021 at 17:11

Klaymant · Accepted Answer · 2021-07-28 20:36:36Z

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.

answered Jul 28, 2021 at 20:36

Klaymant

1786 bronze badges

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

Collectives™ on Stack Overflow

CSS attribute selector with another selector after it

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related