How to select <html> tag in CSS when the source HTML has multiple nested <html> tags?

Question

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:

My CSS in the style tag:

div#divQuestions {
  background: black;
}

Thanks for the help!

@rayhatfield no idea, I didn't write this code. Just tryna not kill my eyes — Conanap, Commented Jul 19, 2020 at 1:28
You're missing a / on your div's close tag: <div id="divQuestions"> <div>. Could be a factor. — ray, Commented Jul 19, 2020 at 1:30
that was a typo on my end for posting the question, sorry. Thanks for catchign that — Conanap, Commented Jul 19, 2020 at 1: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, Commented Jul 19, 2020 at 1:35

ray · Accepted Answer · 2020-07-19 01:33:48Z

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>

edited Jul 19, 2020 at 1:33

answered Jul 19, 2020 at 1:32

ray

27.3k5 gold badges31 silver badges29 bronze badges

apologies, that was a typo. Not sure why it doesn't work on my end then...
– Conanap
Commented Jul 19, 2020 at 1:33

Add a comment |

anova01 · Accepted Answer · 2020-07-19 01:29:58Z

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
...

answered Jul 19, 2020 at 1:29

anova01

911 silver badge10 bronze badges

Ill give this a try too; I've tried html html html div#Question but that didn't work either
– Conanap
Commented Jul 19, 2020 at 1:40
unfortunately this didn't work for me either, but thank you for the suggestion
– Conanap
Commented Jul 19, 2020 at 1:48

Add a comment |

Collectives™ on Stack Overflow

How to select <html> tag in CSS when the source HTML has multiple nested <html> tags?

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related