How can I only select the biggest scroll bar in the page (css)?

Question

i am writing a css (using stylus) to match my firefox's dark skin .

but I only want the main scroll bar change it's color ,but I don't want every scroll bar in the page change.

what can I do to only select the main scroll bar in css?

html {
  scrollbar-color: #6c6c6c #000; /* thumb and track color */
  scrollbar-width: thin;
}

Does this answer your question? [CSS customized scroll bar in div](https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) — Rayees AC, Sep 25 '20 at 03:40
This might helps [scroll-bar color](https://css-tricks.com/almanac/properties/s/scrollbar-color/) — Rayees AC, Sep 25 '20 at 03:41

score 1 · Accepted Answer · answered Sep 25 '20 at 02:10

Use html to select the main scrollbar and use html * to select all the other elements inside html and set their scrollbar-color to initial, like this -

//main scrollbar style
html{
   scrollbar-color: red yellow;
}

//setting all the other scrollbar-color inside the html to their initial value 
html *{
   scrollbar-color: initial;
}

How can I only select the biggest scroll bar in the page (css)?

1 Answers1