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: