Selector Types

CSS selectors belong to one of four categories

• ID Selectors: These selectors apply to elements with a specified ID. In the rule they are specified as #name. It is best to avoid the use of ID selectors.
• Class Selectors: These selectors apply to all elements with a specified class. In the rule they are specified as .name. In good CSS they should be the most numerous.
• Element Selectors: These selectors override the defaults that would be used by the browser to style native elements such as p, em, a etc.
• Pseudo-class Selectors: These selectors are used to apply special effects to selectors belonging to the other categories. Pseudo-class definitions bear the form

  .name:pseudo-class
  {
  propertyA:value;
  ...
  propertyN:value;
  }
  

  .name is required to assign special effects to class selectors. .name must consist of alphanumeric characters and hyphens. The first character must be alphabetic. Element selector effects, on the other hand, take the form element:pseudo-class. The most common use of pseudo-classes is to provide visual feedback for HMTL anchor elements.

The basic selector types can be combined to deliver highly targeted styling effects. For example

• .name#ID - applies to all HTML document elements with the attributes class =" name " and id =" ID "
• h1.name - applies to all <h1> elements with the attribute class =" name "
• h1#ID - applies to all <h1> elements with the attribute id =" ID "
• .name h1 - applies to all <h1> elements within block elements - e.g. divisions - with the attribute class =" name "