I'm trying to hide the ads from the right side of the emails in Gmail. For that I've made an extension that applies a CSS style.

"content_scripts": [
      "matches": ["https://mail.google.com/mail/*", "https://*/*"],
      "css": ["css/hide.css"]

The content of hide.css is:

div.nH.HbF0O{ display: none; }

If I test this CSS in the file %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css, the ads disappear. If I load the extension, it's not working.

If I introduce other styles in the CSS file, for example body {display: none;} or something simple, the CSS it's applied.

What could be the problem?


Maybe a long shot, but I guess I've never seen CSS code like div.nH.HbF0O{ display: none; }.

  • Did you mean div.nH, div.HbF0O{ display: none; } ?
  • or you mean "descendant" and miss a whitespace: div.nH .HbF0O{ display: none; } ?

Edit: I've checked that CSS div.nH.HbF0O{} can refer to HTML <div class="nH HbF0O" /> so I might be wrong.

  • But then why does it work from User StyleSheets? – Synetech Oct 23 '11 at 23:41

I've just been playing around with a simple Chrome extension that applies some CSS styling and have found the web page's styling will take precedence over extension styling.

Try whacking an !important at the end of your declaration, e.g.

div.nH.HbF0O { display: none !important; }

and see if that fixes your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.