Okay, so I looked a bit more and there's few other things at play here.
First, there is no element with id menu-history-clear-recent-history
anywhere. There is one menuitem in menubar > history > Cler recent history
with a data-l10n-id="menu-history-clear-recent-history"
attribute, but that is not the same thing as id
attribute (which you can match with a #
prefix)
Second, that menuitem merely opens the sanitize dialog, but contents of tha dialog are not in any sense inside that menuitem. Thus, you cannot use the a selector for the menuitem as an ancestor for the checkbox in your selector.
The dialog is separate sub-frame with its own document and all so you could do this in a couple of different ways: You can either write #SanitizeDialog .checkbox-check { appearance: none !important; background: #e2cfb6; }
because the sanitize dialog root element has an id attribute SanitizeDialog
- or you could make your rule really scoped to the sanitizeDialog document like this:
@-moz-document url("chrome://browser/content/sanitize.xhtml"){
.checkbox-check { appearance: none !important; background: #e2cfb6; }
}
These are different things because if there ever was some situation in any Firefox window where a .checkbox-check
was inside any element with id SanitizeDialog
then it would match. The second option will only ever match all .checkbox-check
elements inside a document with that specific url.