Delete an element on a webpage
Okay so basically for example lets say i want to permanently just for my screen have this image deleted/or hidden whatever how can I do this without using an extension?
I believe someone brought up usercontent.css?
All Replies (1)
In your other thread, you said you didn't want to use an add-on, you wanted to do it the hard way. ;-)
The userContent.css file holds style rules. For example:
selector { display: none !important; }
The trick is to figure out what CSS selector is associated with the element you want to hide, and it needs to be specific enough not to hide other things you don't want to hide. This is going to differ from one page to the next and typically takes some "hands on" work.
You already know how to use the Inspector, so you might find a unique selector based on an id, or one based on a class that you can make unique based on an ancestor element.
For a deeper dive: https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors
To set up a userContent.css file, you use the same steps as a userChrome.css file but the file name is different. Also, you need to know about this feature if you want your rule only to apply to particular sites or pages:
https://developer.mozilla.org/docs/Web/CSS/@document
Note: Firefox requires it to be written with -moz- as @-moz-document.