jquery - Chrome extension style not being injected -

i've written extension chrome adds functionality site 'reddit'. adds button each post on site following jquery:

...     $(this).append('<li><span class="grab_button">grab</span></li>'); ... 

the class grab_button new. not exist in reddit stylesheets, css in extension stylesheet chrome supposed load not being applied:

html body span.grab_button {         color: #888 !important;         font-weight: bold !important;         padding: 0 1px !important; } 

i have added !important rules make sure css apply overridden. i've made definition specific (i make more specific, shouldn't have to). why on earth isn't being applied? if use webkit developer tools inspect added button, lists styles apply it, ones being overridden, not show custom one.

here relevent section of manifest:

"content_scripts": [         {             "matches": ["http://www.reddit.com/*"],             "js": ["jquery-2.0.3.min.js", "script.js"],         "css": ["style.css"]         } ],  "web_accessible_resources": [         "style.css",     "script.js",     "jquery-2.0.3.min.js" ] 

can explain why isn't working?

your selector incorrect. markup creates span classname of grab_button, css code matching span contains descendant classname instead. css selector code should be:

html body span.grab_button { 

or better yet, just:

.grab_button { 

all stuff preceding not needed , makes slower.