How do I override a (css) metaclass property using a GreaseMonkey script?


Tags: javascript,css,greasemonkey,reddit,tampermonkey

Problem :

My goal here is to make a script which will remove spoiler styling from /r/avatar.

By playing around with the "inspect element" element feature of Firefox I've managed to find the code in one of the CSS sheets which makes spoilered titles transparent. It looks like this

html:not([lang="ns"]) .thing.over18 a.title{
opacity:0.0
}

I've been searching for a way to override this attribute from greasemonkey, but I'm not sure how. I'm new to javascript: I've been trying to make use of

document.getElementsByClassName('.thing.over18')

to try and grab the elements with the (meta?)class attached to them, but no matter how I play with the class name I cant get it to select the right elements (I have an inkling that I'm not using the right function now).

There was actually a script on userscripts.org which did something similar (unspoiler /r/pokemon), but it seems that userscripts has been down so I cant look at its source.



Solution :

There is no such thing as a "metaclass" in CSS or HTML. .thing is a class selector. .over18 is another class selector. You just have two class selectors.

getElementsByClassName only accepts a single class name.

document.getElementsByClassName('thing')
document.getElementsByClassName('over18')

If you want to use a selector, then use querySelector (for a single element) or querySelectorAll (for a NodeList).

document.querySelectorAll(".thing.over18");

    CSS Howto..

    How to position background image in bottom right corner? (CSS)

    How to align an element when it locates below some float elements?

    show hover by default using CSS

    How to use Custom Fonts using CSS?

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How can I set a CSS property on the html element with jQuery?

    CSS: how to remove the indent of list items shown in Firefox

    How do i change the styling of a nodes CSS through javascript(d3)

    How to create a DIV style switcher in JavaScript?

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to use Pseudo-Elements : before & :after to create end caps

    How to Center Text in a JavaScript Function?

    How to mix colors in CSS?

    How to check if CSS is on an element? [closed]

    How to set ASP dropdownlist to read only with css or javascript?

    How to override bootstrap styles?

    How do I make my text disappear when I hover over my div?

    How to remove the white background from Bootstrap carousal?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to mix 100% height with a minimum height

    How to center a navbar

    How to reuse a css background sprite for icons of different sizes?

    How to make arrows on both sides of a box using css [duplicate]

    How to make “button-like appearance” with CSS

    How can display these elements in line?

    How to Position an Element Absolute from Center - CSS

    How to set height of my web page in html5

    How to make gridview and cells bigger?

    toggleClass: How does this CSS work?

    CSS how to hide resize divs while keeping it centerd