CODEWITHSUNDEEP
csscss-selectorspseudo-elementhandsontable
Dmitry Shvedov
Dmitry Shvedov

Reputation: 3286

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.

Upvotes: 0

Views: 54

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371083

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.

Upvotes: 3

Related Questions