CSS Selectors
The fundamental of working with the Document Object Model is to understand Selectors and how to "select" them.
A "Selector" is what it says, it is way of selecting an item of the DOM so that an operation can be performed on it. Ie am being careful in this explanation as I don't want to use "element" so I used "item" - a selector can be used to select an element but it can also be used to select part of an element and even style it.
My code uses many selection methods and I am analysing them as I dissect my code.
An example from my code is querySelectorAll() - here a list is returned. I saw this selector when analysing Bubbling and Capturing (the phases of the event propagation through the DOM).
What W3C say:
The Universal Selector
The following is the W3C example that makes all elements centre on screen and have the colour blue.
a Universal Selector:
<style>
* {
text-align: center;
color: blue;
}
</style>
Earlier fixes for legacy browsers
Looking back on some of the code that I was copying and trying to understand from 2011. In this case a cascading menu I found on the A List Apart website.
An example of the usage of a Universal Selector:
/* Fix IE. Hide from IE Mac \ Need to look this up on A List Apart*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
This an example of the Universal Selector. The "fix" is not now just for IE (which I hope everyone is now using a version that complies to the current standards!). The float on the ul li and the height for the ul li hyperlink tag are probably not really noticable
Having said that, the comment in the code is not particularly helpful or clear and I am not sure if the CSS "hides" are "fixes" what it claims.
The Universal Selector, * , is not obvious if you are not familiar with the CSS.