Javascript is required
ยท
1 min read

Vue Tip: Special CSS Selectors

Vue Tip: Special CSS Selectors Image

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}

Info

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>
8body {
9  margin: 0;
10  padding: 0;
11}
12</style>

Official documentation

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.