0

I'm working on making a dark mode for the Kaplan website tests so I don't blind myself studying.

The following HTML code is representative of the structure of the source, and the tag with id="stylish-23" is what's added by a chrome extension to change the page's CSS styling:

<html> // html 1
  <html> // html 2
    <html> // html 3
      <html> // html 4
        <div id="divQuestions"> </div> //actual tag I want to change
      </html> // html 4
    </html> // html 3
  </html> // html 2
  <style id="stylish-23" type="text/css">...</style>
</html> // html 1

I put div#divQuestions in the style tag's CSS and it does not appear to have any effect at all. Due to the nature and limitation of the extension, I'm only able to add CSS to the style tag, and the CSS appears to not be able to select HTML tags (or at least when I do, nothing happens). I've noticed that dragging the style tag into html #4 in developer console will properly apply the CSS.

The element in question's CSS from inspect: The element in question's CSS from inspect

My CSS in the style tag:

div#divQuestions {
  background: black;
}

Thanks for the help!

Conanap
  • 155
  • 1
  • 11
  • 2
    Why are there 4 html tags? – ray Jul 19 '20 at 01:27
  • @rayhatfield no idea, I didn't write this code. Just tryna not kill my eyes – Conanap Jul 19 '20 at 01:28
  • 1
    You're missing a `/` on your div's close tag: `
    `. Could be a factor.
     – ray Jul 19 '20 at 01:30
  • that was a typo on my end for posting the question, sorry. Thanks for catchign that – Conanap Jul 19 '20 at 01:33
  • Could be another more specific css selector somewhere that's taking precedence over yours? Can you inspect it in the dev tools and see if your rules are being overridden? – ray Jul 19 '20 at 01:35
  • I thought about that too, but selecting the element there wasn't anything else selecting it; I'll post a screenshot of its CSS when inspected on the post as an edit – Conanap Jul 19 '20 at 01:36
  • What browser are you running? Is this true in all browsers? I wonder if the html tag establishes a new document boundary, so the stylesheet in the parent doesn't apply? – ray Jul 19 '20 at 01:43
  • I’m running chrome; I’m not sure the extension is available on others. I’m wondering that too... If I drag the style tag in it works, but according to another reply here, it looks like the style tag works even if outside the html tags. I think there may be something else here interfering but Idk what to look towards – Conanap Jul 19 '20 at 01:44
  • it looks like this is in an atom app; does that prevent the style tag from being applied? – Conanap Jul 19 '20 at 01:49
  • Can you share your css? Maybe the problem is there? – ray Jul 19 '20 at 02:07
  • Sure I’ll put my CSS in the post edit – Conanap Jul 19 '20 at 02:08
  • This is going to be hard to troubleshoot without being able to see everything. – ray Jul 19 '20 at 02:34
  • Yeah I understand that, but since this is not my website and I had to pay to access this website, I’m not sure if I would be allowed to post the website’s source at all. Thank you for your help though, I really do appreciateit. – Conanap Jul 19 '20 at 02:39
  • @rayhatfield you were right! I discovered a few #documents in iframes, which means the CSS cannot penetrate it. Thanks again for your help – Conanap Jul 19 '20 at 05:26

2 Answers2

1

#divQuestions selector works for me if I fix the div's closing tag (or even if I don't, as it turns out):

<html>
  <html>
    <html>
      <html>
        <div id="divQuestions"> </div>
      </html>
    </html>
  </html>
  <style id="stylish-23" type="text/css">
    #divQuestions {
      padding: 48px;
      background: aliceblue;
      border: 4px solid blue;
    }
  </style>
</html>
ray
  • 26,557
  • 5
  • 28
  • 27
0

nth-of-type is a selector that matches the nth element of their "type".
So, you can do this:

html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...

Or, you can do this since you said "multiple nested tags":

html
html > html
html > html > html
...
anova01
  • 93
  • 1
  • 10