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 >?

Diamagnet

This is not valid CSS. Are you using a preprocessor? – Rudy

Interesting. I think the codebase is using Sass and PostCSS. – Diamagnet

Are you using an older version of Angular? If so it's a deprecated equivalent to ::ng-deep – Jorrie

@Chris W. No, it's using Vue. – Diamagnet

Vue uses it also. – Jorrie

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>

Othilia

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)

Bonnard