Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Special CSS Selectors

Vue Tip: Special CSS Selectors Image
Style

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 { /* ... */ }

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:

<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

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.

Vue Tip: Use Optional Chaining in Templates

It's possible to use optional chaining in Vue templates.

Vue Tip: Use Vuex in Vue Router Navigation Guards

It's possible to use Vuex state to determine if a user is allowed to visit certain Vue Router routes.