CSS SELECTORISMS A small document describing possible misunderstandings of css selectors. CH.1 SELECTING THE FIRST ELEMENT As of writing I ran into a problem using `:first-child` with `document.querySelector`. I have learned this selector literally means "select the element **if it is the first child**". It is super important to emphasize this, because if you have, for example:
my name is lee
Your selector `p:first-child` will not match! For the simple reason that *it is not the first child of ``*. So how can we select the first child of a specific type? `:first-of-type` ! document.querySelector('p') == document.querySelector('p:first-of-type') In CSS files though, the former selects **all** `` elements, whereas the latter just selects the first. CH.2 `QUERYSELECTOR` DOES NOT SCOPE TO THE ELEMENT It turns out when you do something like: // html: