QUERYSELECTOR DOES NOT SCOPE TO THE ELEMENT
Yeah, it does:
querySelector()method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Easy example. Go here: https://example.com. Result:
document.querySelector('div').querySelector('div'); null document.querySelector('div').querySelectorAll('div'); NodeList 
In a certain sense, it does, but not in the way you might expect it to.
Suppose you have the following markup:
<div class="a"> <div class="b"> <div class="c"></div> </div> </div>
The result of
b.querySelector('.a .c') is not
document.querySelector('.b .a .c'), which would be null.
Instead, it returns
document.querySelectorAll('.a .c').filter(e => b.contains(e)) which is
So it is scoped in the sense that you’ll only get back elements that are children of the element you’re calling
querySelectorAll on, but the CSS query itself is not scoped to the element.
:scope at the start of the string, so you can do
querySelector("> div"); to get like the immediate child.)
Wow that is horrible. With the current page we are on, this fails:
but this works:
I don’t know what to tell you, the code is there, and when run, you can see for yourself… https://jsfiddle.net/tyg2fdmp/
The text macros I get, this is clearly a refined system and it’s impressive but I get it. I completely do not get how he’s producing those diagrams in realtime in the middle of a lecture though, so this blog post is a cliffhanger :-)
I really want to see how the diagrams happen. My thoughts: diagrams on a sketchpad that are later imported (or imported with a script??).
I used to take notes in LaTeX for 2 courses, for diagrams I would draw them in my notebook and then make diagrams and graphs after class. I stopped doing it because it got to a point where I was trying to fix a latex error and I would ignore the content. I think what would’ve worked best for me would be to take notes in LaTeX during class, but only try to compile it and fix errors after class.
Have a look here!
I just published the follow-up blog post here!
I was wondering how you did it, if there was a bit of a cheat maybe, and I’m delighted to see that the answer is “streamlining and lots of practise with inkscape”! This is inspirational stuff, keep it up :-)
Re-reading you comment, I see that you meant the graphical diagrams and not just the LaTeX generation…that would be interesting to see.
How do you know which styles to use?
How do you find out that you need to use those specific class names?
I tried looking this up, but came back rather empty-handed. Loads of examples abound, but it’s never very clear to me what classes apply to what exactly and how people figure out what the class names are in the first place.
You can inspect the UI via the Browser Toolbox (You can enable it in the Developer Tools settings and then press Ctrl+Alt+Shift+I)
Aha, brilliant! Thank you
Thanks! I’ve cited you in the post, as my changes only involved editing existing styles from other people.