What is a triple greater than selector in css?

Question

I saw the following CSS code with what appears to be a triple greater than selector.

.b-table >>> .table-wrapper {
  overflow-x: auto; 
}

I know it's referencing a Buefy table component and applying a specific style to elements that have a table-wrapper class, but what does the >>>operator mean exactly? Based off this answer I'm thinking it might be for applying styles to children of children of children, is that accurate? If so, why doesn't it seem to work with other amounts of >?

Answer 1

>>> operator is Vue.js specific feature and called deep selector. In scoped CSS, you cannot apply CSS to child components without deep selector.

As your example, these two selector won't be applied.

<style scoped>
.table-wrapper {
  overflow-x: auto !important;  /* won't work */
}
.b-table .table-wrapper {
  overflow-x: auto !important;   /* won't work */
}
</style>

It needs deep selector.

<style scoped>
.b-table >>> .table-wrapper {
  overflow-x: auto; 
}
</style>

Answer 2

It is shadow-piercing descendant combinator. In Angular, >>>, /deep/ and ::ng-deep are the same (source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). It is deprecated and support has ben removed from major browsers. For example, it has been removed since Chrome version 63, around December 5 2017 (source: https://www.chromestatus.com/feature/6750456638341120)