Javascript is required
Mokkapps Logo

Vue Tip: Special CSS Selectors

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Feb 25, 2022
1 min read
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 {/* ... */}

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 content from me. Alternatively (or additionally), you can also subscribe to my newsletter.