Why document.querySelector fails to find class name in Javascript

Question

Just getting started with document.querySelector in JavaScript. Why would let result = document.querySelector('Lh') return a null. I have tried many permutations with a div as part of the search string but there must be something different about it in a div? Wildcard suggestions...

let result1 = document.querySelector('[class^="Lh(21px)"]')
let result2 = document.querySelector('[class^=".Lh(21px)"]')
let result3 = document.querySelector('[class^="Lh"]')
let result4 = document.querySelector('[class^=".Lh"]')

All return nulls.

<div class="" data-test="quote-mdl" data-yaft-module="tdv2-applet-summary">
    <div class="Mb(25px) smartphone_Px(20px)">
        <h3 class="Mb(5px)"><span>Summary</span></h3>
        <div class="Lh(21px)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed et magna magna. Praesent in condimentum quam. Phasellus dui ligula,
            tincidunt porta fermentum nec. rhoncus id enim. Duis tempor, tellus at
            fermentum consectetur, nisl ipsum placerat metus, sed aliquam turpis enim eget erat.
        </div>
    </div>
</div>

Answer 1

<div class="Lh(21px)">Lorem ipsum dolor ...

The name of your class is Lh(21px) and not Lh, if you want to match any class name that begins with Lh, use the solution provided in this answer:

let result1 = document.querySelector('[class^="Lh"]');
console.log(result1)

<div class="" data-test="quote-mdl" data-yaft-module="tdv2-applet-summary">
    <div class="Mb(25px) smartphone_Px(20px)">
        <h3 class="Mb(5px)"><span>Summary</span></h3>
        <div class="Lh(21px)">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed et magna magna. Praesent in condimentum quam. Phasellus dui ligula,
            tincidunt porta fermentum nec. rhoncus id enim. Duis tempor, tellus at
            fermentum consectetur, nisl ipsum placerat metus, sed aliquam turpis enim eget erat.
        </div>
    </div>
</div>