Je me note :

En JS, avec element.querySelector(), pour cibler un descendant direct de element, ceci ne marche pas :

element.querySelector('> .class');

Si element possède un id lui-même on peut faire ça :

element.querySelector('#id > .class');

Mais il y a une méthode dédiée :

element.querySelector(':scope > .class');

:scope est censée représenter l’élément sur lequel on utiliser querySelector(). C’est une notation CSS similaire similaire à « :root », et d’ailleurs, à ce jour, il est égal à :root (il n’a pas encore d’autres usages).

C’est censé marcher (même si je n’ai pas réussis sous Firefox).

Sinon, on peut toujours utiliser

element.firstElementChild

(attention, si querySelector() renvoie une nodeList, firstElementChild() renvoie une HTMLCollection.)