Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Special CSS Selectors

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Feb 25, 2022
1 min read
|
117 views
Style
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:

<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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.