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