1

I'm scraping this news website: http://www.nu.nl/

If you open console and type:

$('*').css('background', 'none');

You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?

Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.

Youss
  • 4,196
  • 12
  • 55
  • 109
  • maybe using `false` instead of `'none'` helps? – gitaarik May 01 '13 at 14:43
  • 2
    use this thread. it is tested and confirmed [Stackoverflow][1] [1]: http://stackoverflow.com/questions/4384213/remove-background-color-images-for-all-elements-with-jquery – Arif YILMAZ May 01 '13 at 14:44
  • @Borsel None of the answers provided will work, you can test it, the news website has Jquery installed – Youss May 01 '13 at 14:47

1 Answers1

1

jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.

$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');

Then just add that class to everything.

$('*').addClass('noBG');

Edit

Based on comments below, you could try

$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');

Then add the ID to the body

$('body').prop('id', 'noBG');

Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Hi I tried it with `html body .noBG` but it doesn't work, any idea why that is? – Youss May 01 '13 at 15:03
  • @Youss because it's not specific enough of a selector. You may need to use multiple ones like `html #page .noBG, html body .noBG, html #selector .noBG`. You'll need to learn about the specificity of CSS selectors. – Ohgodwhy May 01 '13 at 15:05
  • The point is I can't target a specific element with my script. Are you sure I can't append the new class to (*) with its style, without targeting some element? – Youss May 01 '13 at 15:07
  • 1
    @Youss Yes, I'm 100% positive. You can't override `#salous .container .element a.noBG` with `html body .noBG` because the specificity of the selector would reign supreme over the aforementioned. What exactly is it you're doing with this script? there may be a better way depending on the functionality and intended purpose. – Ohgodwhy May 01 '13 at 15:09
  • At this point Im just trying to get rid of the background, nothing more. What if I would wrap every element in special div and and then apply the css of no background to its children?? There has to be a way:) If you can think of something please let me know – Youss May 01 '13 at 15:14
  • 1
    @Youss well there is one thing you could try...see above – Ohgodwhy May 01 '13 at 15:27
  • Thanks for sticking around. Its specific indeed, it destroys all styling:) Its a good thing, it gives me more control which is exactly what you intended of course, so I will play with those codes provided. If I succeed I will post the final code here. – Youss May 01 '13 at 15:33
  • I found a way with `$('body *').attr("style", "background: none !important;");` You can test it on the website with console. You will see a new problem arises which is that a strange div called `id="cboxOverlay"` will "overlay" everything making it imposible to select a link. This div originally has `display:none;` set to it but when I put my new code this css disapears making the overlay well....overlay everything. Do you think this is some sort of security setting? Or does it has to do with inserting background:none? Would appreciate if you could help me out some more. – Youss May 01 '13 at 16:19
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29256/discussion-between-ohgodwhy-and-youss) – Ohgodwhy May 01 '13 at 16:20