DEV Community

Cover image for Mastering Deep Selectors (>>>) and :deep() in Vue: Styling Child Components from Parent! πŸš€
Dharmendra Kumar
Dharmendra Kumar

Posted on

3 1 1 1 1

Mastering Deep Selectors (>>>) and :deep() in Vue: Styling Child Components from Parent! πŸš€

When working with scoped CSS in Vue, applying styles from a parent to a child component can be tricky. Vue offers two powerful tools to help with this: the deep selector (>>>) and the :deep() pseudo-class. Both allow you to penetrate scoped CSS boundaries, but which one should you use? Let’s explore both with examples and compare them!


πŸ›  1. Using the Deep Selector (>>>)

As we discussed earlier, the deep selector is a special way to apply styles from a parent component to a child component while keeping the scoped attribute in place.

Example:

<!-- ParentComponent.vue -->
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
/* Scoped styles apply only to the parent */
.parent-container {
  background-color: lightblue;
}

/* Deep selector to apply styles to a child component */
>>> .child-text {
  color: red;
}
</style>
Enter fullscreen mode Exit fullscreen mode

In this example, the deep selector (>>>) allows us to style the .child-text class inside the child component, even though both components have scoped styles.


πŸ›  2. Using the :deep() Pseudo-Class

Vue 3 introduced a new and more semantic way of applying deep styles using the :deep() pseudo-class. This is the recommended way moving forward.

Example:

<!-- ParentComponent.vue -->
<template>
  <div class="parent-container">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
/* Scoped styles apply only to the parent */
.parent-container {
  background-color: lightblue;
}

/* :deep() to apply styles to a child component */
:deep(.child-text) {
  color: red;
}
</style>
Enter fullscreen mode Exit fullscreen mode

With :deep(), you get the same result as using >>>, but the syntax is more future-proof and aligns with modern CSS practices.


πŸ” Which Is Better: >>> or :deep()?

  • Vue 3 Compatibility:

    In Vue 3, the :deep() pseudo-class is the preferred method and will likely become the standard. It’s more semantic and readable than the >>> operator, which may feel a bit hacky.

  • Vue 2 Compatibility:

    If you’re using Vue 2, you’ll need to stick with >>>, as :deep() is not supported in Vue 2 by default. However, with Vue-loader updates, :deep() can also be used in Vue 2 if configured properly.


πŸ’‘ Recommendation

  • If you're working in Vue 3, it's best to use :deep() as it’s more readable, modern, and future-compatible.
  • If you're using Vue 2, the deep selector (>>>) is a reliable option. However, if your project will upgrade to Vue 3, start using :deep() to future-proof your styles.

πŸ”§ Bonus: Combining :deep() with Inline Styles

You can also use :deep() for inline styles if necessary:

<style scoped>
/* :deep() with dynamic style binding */
:deep(.child-text) {
  font-size: 20px;
  color: v-bind('textColor'); /* Example of using Vue dynamic styling */
}
</style>
Enter fullscreen mode Exit fullscreen mode

This ensures the child component gets the style, even when you bind data to the CSS dynamically!


🎯 Conclusion

Both >>> and :deep() selectors allow you to control the styles of child components while maintaining scoped styles. If you're using Vue 3, it's better to adopt the :deep() pseudo-class for a more modern, clean, and future-proof approach. However, >>> remains effective and reliable, especially in older Vue 2 projects.


Happy styling! 🎨

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ β€’

This is out of date. It is recommended to use :deep(

Collapse
 
dharamgfx profile image
Dharmendra Kumar β€’

Thank you for pointing that out! πŸ™Œ I’ve updated the documentation to reflect the latest recommendation of using :deep() instead of the older >>> syntax. Your feedback helps keep the content accurate and up-to-date. If you have any more suggestions or questions, feel free to let me know! 😊

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs