question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How do I apply scoped styles to 'a' tag generated by Link?

See original GitHub issue

I’ve got a Nav component:

<script>
import {Link} from 'svelte-routing';
</script>

<style>
  a {
    color: #bedead;
    text-decoration: underline;
  }
</style>

<nav>
  <a href="somewhere">Get me somewhere</a>
  <Link to="/signin">Sign in</Link>
  <Link to="/signup">Sign Up</Link>
</nav>

Is there any way to make scoped a styles to be applied to anchors generated by Linkcomponent?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
konclavecommented, May 28, 2019

Okay, thank you.

2reactions
EmilTholincommented, May 28, 2019

Hi @konclave!

You could use the :global modifier in order to style all anchor tags inside of your nav.

<style>
  nav :global(a) {
    color: #bedead;
    text-decoration: underline;
  }
</style>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Scoped CSS - Vue Loader
Scoped CSS. When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. This is...
Read more >
Vue.js: How can I make dynamically created HTML use ...
Dynamically Generated Content DOM content created with v-html are not affected by scoped styles, but you can still style them using deep ...
Read more >
Scope of the <link> tag (specifically the scope of CSS style ...
I have a suggestion to the way that CSS style sheets are linked in ... script file in using <script> that it is...
Read more >
Saving the Day with Scoped CSS
Scoped CSS has the ability to save the day, but if it's at all possible you should use ID selectors and linked stylesheets....
Read more >
scope - CSS: Cascading Style Sheets - MDN Web Docs
The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found