Selector Specificity

Part One:

Element Selector

Selects all elements with the specified element name, for example using the < p > tag would change the CSS rules of everything set inside of a < p > element

Group Selector

If you have elements with the same style definitions it will be better to group the selectors, to minimize the code. Separate each selector with a comma (,). For example, grouping h1, h2, h3, p { CSS rule }.

Descendant Selector

Selector matches all elements that are descendants of a specified element, selects element followed by a space, then all descendants come after. Example woulld be written as: div (space) h2 (space) p { CSS Rule }.

Class Selector

Selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. For example a class selector would be written as (.class).

ID Selector

Uses the id attribute of an HTML element to select a specific element, a hash (#) character, followed by the id of the element is how it is selected, similar to a class. For example an id would be written as (#id1).

Universal Selector

Selects the entire HTML page, uses the astrix (*) to select. Written as * { CSS Rule }.

Pseudo Selectors

Used to define/select a special state of an element. Such as editing a link that has been clicked on would be, a:visted { rule }.

Part 2:

  1. ID
  2. Class
  3. Pseudo
  4. Descendant
  5. Group
  6. Element
  7. Universal