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

Interesting. I think the codebase is using Sass and PostCSS. — Dan Mandel, Apr 22 '19 at 21:08
Are you using an older version of Angular? If so it's a deprecated equivalent to `::ng-deep` — Chris W., Apr 22 '19 at 21:10
Vue [uses it also](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors). — Chris W., Apr 22 '19 at 21:14

score 19 · Accepted Answer · answered Oct 14 '20 at 04:22

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

score 1 · Answer 2 · answered Jul 16 '21 at 04:52

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)

What is a triple greater than selector in css?

2 Answers2

Linked

Related