What I learned on this mini-project.
This is used when you wish to match direct descendent elements.
https://gist.github.com/fbe051bcb39b47c8e2fe4748344af48a
So, in this case the first li tag, of elements with a class of cool will be selected.
In this project, an element needs to be displayed and faded in. To begin with, the element is given the following CSS... display: none, an unfortunate consequence of this, is that transitions can't be applied elements that aren't displayed.
By using multiple classes and adding CSS sequentially, you can first add the element to the page through a class with display: block, then add a second class with the desired transformation properties.
The following code demonstrates this.
https://gist.github.com/c404b9629488df8d8ce724748a55a24d
Note, a delay of 150ms has been added before adding the second class, this is to maintain the order in which the classes are added.
This object, will by default, give positional values based on the current viewport's top-left point (which corresponds to (0, 0)).
On occasion however, you might want the element you are targeting to be based on another element.
To do this, you must get that element's positional values via getBoundingClientRect and subtract these from the target element's positional values.
An example is shown below, where the dropdown is positioned based on the 'nav'.