Web Designing-Eliminate element types for class and id selectors
Wednesday, July 16th, 2008When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).
So, instead of writing
1. div#content { /* declarations */ }
2. fieldset.details { /* declarations */ }
you can write
1. #content { /* declarations */ }
2. .details { /* declarations */ }
and save a few bytes for each selector.
This is especially useful for id selectors since they must be unique in a document, which reduces the risk of rules conflicting with each other. class names on the other hand can be used any number of times in a document, and different element types can be assigned the same class name (or names). To style element types with the same class name differently you will need to specify the element types in the selector.
Be aware that the above rules are not identical. If you write one rule with and one rule without the element type in the selector, the rule that uses the element type will have higher specificity.