Search code examples
csscss-selectorspseudo-elementhandsontable

What is this pseudo-element applied to?

Consider my css has this:

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

What is this applied to? It's not applied to html or body. But to what?

I'm trying to style scrollbars on a component of some lib (handsontable), but it renders funny, because its JS code is reading scrollbar sizes from somewhere.

enter image description here

The css above fixes that. But then it sets scrollbar sizes everywhere in the app, which is undesirable. I'm looking for a workaround. If I do something like:

html::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

or same with any class that is a parent of the component, I'm not getting the result.

Solution

  • This:

    ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

    is the same as this:

    *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

    So it applies to all elements.

    § 6.2. Universal selector

    If a universal selector represented by * is not the only component of a sequence of simple selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.