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:

1<style scoped>
2.a :deep(.b) {
3  /* ... */
4}
5</style>

Vue will compile this code into:

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

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:

1<style scoped>
2:slotted(div) {
3  color: red;
4}
5</style>

Global Selectors

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

1<style scoped>
2:global(.red) {
3  color: red;
4}
5</style>

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

1<style scoped>
2:global(.red) {
3  color: red;
4}
5</style>
6
7<style>
8body {
9  margin: 0;
10  padding: 0;
11}
12</style>

Official documentation