 |
Type /Element Selectors: The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector or node name regardless of their position in the document tree . Used alone, therefor selects all the elements for the given node name.
Syntax
Example: View in JSFIDDLE
There is a huge list of HTML elements that you can select using type selectors which means you can change the look and feel of any element in the DOM.
Class Selectors: These selectors select HTML elements based on the class attribute regardless of their position in the DOM. The class is defined as space-separated list of items and one of those items must match exactly the class name given in the selector.
Syntax
Example: View in JSFIDDLE
Some key points to remember while using Class Selectors:
- Classes should not replace HTML elements
- Don’t overuse classes
- Is there an existing HTML element that could be used instead?
- Is there a class or ID in the DOM that could be used?
Universal Selectors: In CSS , * (asterisk) is the universal selector. It is like a type selector which can match any type of HTML element.
It can be used in a universal reset like this:
ns|E:elements with name E in namespace ns*|E:elements with name E in any namespace, including those without any declared namespace|E:elements with name E without any declared namespaceE :if no default namespace has been specified, this is equivalent to *|E. Otherwise it is equivalent to ns|E where ns is the default namespace.
