[routesetter]

Removing footer banner from NitroPack (free version) with CSS


I installed this plugin to get a better speed score on one of my sites and because it's free. I'm aware it is realistically tricking speed tests into better results but for this site it's okay.

I found it funny that it changes the spacing in the inline styles to make selecting it via css to hide it annoying. Once you put a selector for to display:none; on the <div> it will change the spacing to a different variation.



It also uses #shadow-root (closed) [ShadowRoot] to prevent from selecting the elements inside the <div>.

I prefer CSS only solutions to JS so here's a couple greedy selector options. Pick one that doesn't hit other elements (you should avoid inline styles to begin with anyways):

Code

div[style^="display:                           block                           !important;"],
div[style^="display:                          block                          !important;"],
div[style^="display:                         block                         !important;"],
div[style^="display:                        block                        !important;"],
div[style^="display:                       block                       !important;"],
div[style^="display:                      block                      !important;"],
div[style^="display:                     block                     !important;"],
div[style^="display:                    block                    !important;"],
div[style^="display:                   block                   !important;"],
div[style^="display:                  block                  !important;"],
div[style^="display:                 block                 !important;"],
div[style^="display:                block                !important;"],
div[style^="display:               block               !important;"],
div[style^="display:              block              !important;"],
div[style^="display:             block             !important;"],
div[style^="display:            block            !important;"],
div[style^="display:           block           !important;"],
div[style^="display:          block          !important;"],
div[style^="display:         block         !important;"],
div[style^="display:        block        !important;"],
div[style^="display:       block       !important;"],
div[style^="display:      block      !important;"],
div[style^="display:     block     !important;"],
div[style^="display:    block    !important;"],
div[style^="display:   block   !important;"],
div[style^="display:  block  !important;"],
div[style^="display: block !important;"]{
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
}

-OR-

Code

div[style$="clear:                           both                           !important;"],
div[style$="clear:                          both                          !important;"],
div[style$="clear:                         both                         !important;"],
div[style$="clear:                        both                        !important;"],
div[style$="clear:                       both                       !important;"],
div[style$="clear:                      both                      !important;"],
div[style$="clear:                     both                     !important;"],
div[style$="clear:                    both                    !important;"],
div[style$="clear:                   both                   !important;"],
div[style$="clear:                  both                  !important;"],
div[style$="clear:                 both                 !important;"],
div[style$="clear:                both                !important;"],
div[style$="clear:               both               !important;"],
div[style$="clear:              both              !important;"],
div[style$="clear:             both             !important;"],
div[style$="clear:            both            !important;"],
div[style$="clear:           both           !important;"],
div[style$="clear:          both          !important;"],
div[style$="clear:         both         !important;"],
div[style$="clear:        both        !important;"],
div[style$="clear:       both       !important;"],
div[style$="clear:      both      !important;"],
div[style$="clear:     both     !important;"],
div[style$="clear:    both    !important;"],
div[style$="clear:   both   !important;"],
div[style$="clear:  both  !important;"],
div[style$="clear: both !important;"]{
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
}

Remember to purge cache (website) and empty cache (browser) to see the results of that banner now being hidden.