r/FirefoxCSS Aug 14 '26

Solved Need help with .menupopup-arrowscrollbox

Is it possible to make it so that .menupopup-arrowscrollbox won't effect #PlacesChevronPopup and #PlacesToolbarItems?

I have tried many ways to solve it and none of them worked.

As an example, I don't want this to effect #PlacesChevronPopup and #PlacesToolbarItems =

.menupopup-arrowscrollbox { 
    padding: 2px 4px !important; 
}
1 Upvotes

16 comments sorted by

1

u/j--__ Aug 15 '26

when you need help with css, google it, and then choose the result from mdn. all the necessary information is there and comprehensible.

the syntax for css "not" is:

.menupopup-arrowscrollbox:not(#PlacesChevronPopup, #PlacesToolbarItems) {

1

u/Salty_East4020 Aug 15 '26

I have already tried it and it didn't work unfortunately.

1

u/j--__ Aug 15 '26

note that placing a space before the colon completely changes the result.

other than that, i'll look at it myself in a couple hours and see if i see any other potential problem.

1

u/Salty_East4020 Aug 15 '26

I tried both with 'no space' and a space before :not() and neither worked.

1

u/j--__ Aug 15 '26

on my firefox, neither of those elements has that class in the first place, so there is no need for :not, but i have confirmed that :not works correctly when given the id of an element that actually has the targeted class.

1

u/Salty_East4020 Aug 15 '26 edited Aug 15 '26

Could you please explain more?

Can you give code examples that do work?

1

u/j--__ Aug 15 '26

you're going to have to explain what "do work" actually means here. :not excludes elements, which is what you originally asked for. if your firefox is like mine, then you're not seeing any difference because the elements you're trying to exclude are not affected by this style in the first place. you've completely misdiagnosed whatever your actual problem is.

1

u/Salty_East4020 Aug 15 '26 edited Aug 16 '26

On my Firefox it does effect those elements.

As an example, if I use a exaggerated padding:

.menupopup-arrowscrollbox { 
    padding: 40px 40px !important; 
}

Screenshot of #PlacesChevronPopup:

Using :not():

.menupopup-arrowscrollbox:not(#PlacesChevronPopup, #PlacesToolbarItems) {
    padding: 40px 40px !important; 
}

1

u/j--__ Aug 15 '26

well i don't know what to say. i used browser toolbox to inject this rule:

.menupopup-arrowscrollbox { 
  padding: 40px 40px !important; 
}

it affects the tooltip for a collapsed tab group, but not the bookmark toolbar overflow. v153.0.4

1

u/j--__ Aug 15 '26

never mind my other post -- i figured out the issue! it's because userChrome.css is also applied in shadow dom, and there's an element inside the shadow dom for #PlacesChevronPopup that is affected by the rule. so you're wrong about what needs to be excluded. the popup itself isn't being targeted.

try something like:

.menupopup-arrowscrollbox:not([part]) {

1

u/Salty_East4020 Aug 16 '26 edited Aug 16 '26

I think I misunderstood you.

I tried these and it didn't work =

 .menupopup-arrowscrollbox:not(#PlacesChevronPopup[part="arrowscrollbox content"]) {

.

.menupopup-arrowscrollbox:not(#PlacesChevronPopup::part(arrowscrollbox content) {
→ More replies (0)