Applying styles to components can be tricky in Vue sometimes, especially when dealing with components with many nested elements.

Let’s take a practical example to understand how the deep CSS selector will be helpful.

In the below example, we’ve created a wrapper to the label with the name “LabelWrapper.Vue”. There are two files in which we want to use this wrapper but want the color of the label to be different in both. In “GreenLabel.Vue”, we want the label’s color to be green. In “BlueLabel.Vue”, we want the label’s color to be blue.

<template>
         <label> Hello World ! </label>
</template>

<template>
       <div>
               <LabelWrapper></LabelWrapper>
       </div>
</template>

<template>
        <div>
               <LabelWrapper></LabelWrapper>
       </div>
</template>

So, as you would have noticed, we haven’t applied the styles to any of the components yet. One way to achieve what we want is by passing a prop from each component which uses the “LabelWrapper.Vue”. However, that is not a very feasible way in a scenario where too many props are involved.

Vue.js provides an amazing way to handle this. It’s a deep selector which helps us to style the elements of the child component from the parent component.

Let’s understand how the deep selector works.

Usage of deep selector:

In the “GreenLabel.Vue” file, add the following style section after the template.

<template>
       <div>
               <LabelWrapper></LabelWrapper>
       </div>
</template>

<style scoped>
      div >>> label {
            color: green;
      }
</style>

>>> is the deep selector here. The usage of the deep selector here means that it finds all the labels inside the div and colors them green. The same can be achieved for the “BlueLabel.Vue” component.

The deep selector comes in different forms. We’ll continue using the scenario from above in the examples below.

Working with Vue 2:

If you’re using SASS, use the deep selector in the following way:

<style scoped>
       div ::v-deep label {
             color: blue;
       }
</style>

If not using SASS, use the deep selector in the following way:

<style scoped>
       div >>> label {
             color: blue;
       }
</style>

Working with Vue 3:

In Vue 3, use the deep selector in the following way:

<style scoped>
       div ::v-deep(label) {
             color: blue;
       }
</style>

Important points to note:

• Style must be scoped in order for deep selector to work
• /deep/ is deprecated in Vue 2
• >>> is deprecated in Vue 3

Winding up this article, we can conclude that the deep CSS selector is a very handy feature of Vue which helps us avoid unnecessary props and makes applying the styles to the child components easy.