1

In my Angular application, I have components pages like <app-page-home>, <app-page-login>, <app-page-documentation>, etc. that are mounted when required in my <router-outlet>.

I am trying to target all these components together from a global stylesheet (./src/styles.styl that applies everywhere in the application), but CSS doesn't seem to accept wildcards for custom tags.

I would like to avoid listing my tags one by one and instead, something like app-page-* { border : blue solid 1px; }

app-page-* {
   border : blue solid 1px;
}
<app-page-login>Login stuff</app-page-login>
<br>
<app-page-documentation>Documentation</app-page-documentation>

I can't add classes (or can I?) because these component are being dynamically mounted by the router, otherwise I could obviously use something like class="page".

Any idea how to target custom tags with a wild card? Thanks

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63

1 Answers1

0

That's correct, css doesn't have partial type wildcards. Most easy solution is to just group them together, like this;

app-page-login, app-page-documentation { border: 1px solid blue; }

Or apply a class to them;

<app-page-login class="app-page" />
<app-page-documentation class="app-page" />

and target the class;

.app-page { border: 1px solid blue; }

You could do fancy stuff with attribute selectors, but imo for your use case the two solutions above are the most suitable.

-- edit; I see you can't add classes. Use the first solution then.

giorgio
  • 10,111
  • 2
  • 28
  • 41