Vue Tip: Special CSS Selectors

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 {
/* ... */
}

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.