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
}
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:
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>
8
body {
9
margin: 0;
10
padding: 0;
11
}
12
</style>
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter: