How to affect CSS with no ID or Class?

Scorpion Ghost · Apr 30, 2020

So I use this extension on Firefox called Stylus which basically allows me to add CSS to override any site's native CSS. I use it to hide unnecessary things on various sites I visit often. Makes my life easier.

But now I ran into a site where I wanted to hide something, and this site, I swear to god, has no ID and no Class on almost any element. All of their HTML is this shit:

HTML:

<div style="margin:0px auto;border-bottom:1px solid #d9bcbc;text-align:center;padding-bottom:9px;background:#fdfbf1;height:42px;line-height:53px;margin-bottom:0px;">
<span style="color:#874c17"><div style="border-radius:30px;background:#ffba00;height:14px;width:14px;display:inline-block;position:relative;top:2px;margin-right:6px;border:1px solid #eca934;"></div>Some text whatever.</span></div>

It's all just "div style" "div style" "div style". They just create the div and jump straight into style. There's no ID, no Class, no Title, no Name, no nothing!

So now, how do I override CSS on a site like this? I have no identifier to point my CSS to.

I wonder if maybe there's a Firefox extension or method to where I can "change" the HTML of a page. Then I can use that extension to edit the HTML and add an ID or Class to the codes I want, and then use Stylus to hide the shit.

Anyway, any ideas?

iSmexy · Apr 30, 2020

Try using the XPath.

Inspect element -> right click the div -> copy -> copy Xpath.

Then you can edit it in Javascript.

here's a link to help you retrieve the element in Javascript: https://stackoverflow.com/questions...-xpath-using-javascript-in-selenium-webdriver

Scorpion Ghost · Apr 30, 2020

I got the idea to use Greasemonkey. And I got semi-success with this:

https://stackoverflow.com/questions...-to-selectively-remove-content-from-a-website

This code works:

Code:

// ==UserScript==
// @name     _Remove annoying divs
// @include  http://YOUR_SERVER/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

/*--- Use the jQuery contains selector to find content to remove.
    Beware that not all whitespace is as it appears.
*/
var badDivs = $("div div:contains('Annoying text, CASE SENSITIVE')");

badDivs.remove ();

//-- Or use badDivs.hide(); to just hide the content.

Problem is, it hides a bunch of divs (instead of just the one div where the text is located).

So say we have:

<div style="bla bla">text</div>
<div style="bla bla"><Annoying text, CASE SENSITIVE</div>
<div style="bla bla">text</div>

For some reason the code above will hide all the divs, instead of hiding just the 1 dive with the text I put in.

Scorpion Ghost · May 1, 2020

iSmexy said:
Try using the XPath.

Inspect element -> right click the div -> copy -> copy Xpath.

Then you can edit it in Javascript.

here's a link to help you retrieve the element in Javascript: https://stackoverflow.com/questions...-xpath-using-javascript-in-selenium-webdriver

Sorry for double quote. So the above what I tried didn't work, and I don't know how to make it work.

Here is the xPath:

/html/body/center/table/tbody/tr/td[2]/div/div[5]/div[2]

I am not sure how to use it. I'll google for tagging CSS with XPath and then use Stylus if I manage. Otherwise I'll google how to hide elements with XPath using Greasemonkey.

i think you've given me the solution actually. I can use XPath to tag the stuff I want, which should be enough of a bone for me to run with and solve my problem. Thanks

RAP · May 1, 2020

use the attribute data-*

<div style="bla bla" data-custom="X">text</div>
<div style="bla bla" data-custom="Y"><Annoying text, CASE SENSITIVE</div>
<div style="bla bla" data-custom="Z">text</div>

Call it via JS with querySelectorAll method.

document.querySelectorAll('[data-custom]');

Scorpion Ghost · May 1, 2020

All right, done. Greasemonkey and XPath for the win!

Code:

var targEval = document.evaluate (
    "/html/body/center/table/tbody/tr/td[2]/div/div[5]/div[2]",
    document.documentElement,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
);
if (targEval  &&  targEval.singleNodeValue) {
    var targNode  = targEval.singleNodeValue;

    // Payload code starts here.
    targNode.style.display = "none";
}

Thank you @iSmexy

Scorpion Ghost · May 1, 2020

DubaiClub said:
use the attribute data-*

<div style="bla bla" data-custom="X">text</div>
<div style="bla bla" data-custom="Y"><Annoying text, CASE SENSITIVE</div>
<div style="bla bla" data-custom="Z">text</div>

Call it via JS with querySelectorAll method.

document.querySelectorAll('[data-custom]');

See my previous reply. Does exactly what I wanted.

Thanks for taking the time to respond in any case

How to affect CSS with no ID or Class?

Scorpion Ghost

Elite Member

iSmexy

Regular Member

Scorpion Ghost

Elite Member

Scorpion Ghost

Elite Member

RAP

Senior Member

Scorpion Ghost

Elite Member

Scorpion Ghost

Elite Member

Main Menu

Marketplace

Making Money

BlackHat World