Mokkapps Logo

Vue Tip: Special CSS Selectors

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
February 25, 2022
1 Minuten Lesezeit
|
- Ansichten

Deep Selectors

The :deep() CSS pseudo-class can be used if you want styles to apply to some “deeply” nested child components:

<style scoped>
  .a :deep(.b) {
  /* ... */
}
</style>

Vue will compile this code into:

.a[data-v-f3f3eg9] .b {
/* ... */
}

DOM content created with v-html is not affected by scoped styles, but you can still style them using deep selectors.

Slotted Selectors

By default, scoped styles do not affect contents rendered by <slot/> but we can use the :slotted pseudo-selector to apply styles to slot content:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

Global Selectors

The :global pseudo-class can be used to globally apply a rule, even within the <style scoped> block:

<style scoped>
:global(.red) {
  color: red;
}
</style>

To be more specific, I recommend adding a second <style> block if you need to apply multiple global styles:

<style scoped>
:global(.red) {
  color: red;
}
</style>

<style>
  body {
  margin: 0;
  padding: 0;
}
</style>

Official documentation



If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github