CSS Selector Specificity

Part One

1. The element selector will apply styles to any html element tag that is specified. The element selector is best used when you want every specified element to have the same CSS style. In order to implement the element selector the syntax to be used is element { property: property value;}.
2. The group selector will allow the user to target more than one selector inviting the opportunity to specify the same properties and rules for more than one selector at the same time. The key syntax piece in using this style of selector is inserting the comma between selectors.
   Here is an example of a grouped selector: div#main, p , h3.center { property: property value; }
3. The descendant selector also known as the contextual selectors apply styles to elements that are contained within other elements and are separated by a white space. The descendant selector can be used reduce the amount of embedded css styles you use by using utilizing the already html structure to affect the elements you intend to versus having to hard code the class attribute multiple instances to achieve the desired change. #main p { property: property value; }
4. Class selector is an excellent tool for styling different instances of an element in different ways. A class selector is distinguishable due to it's preceding period. Classes can either be independent or dependent. An independent class can be used to style an element while a dependent class styles a particular element.
   To apply a dependent class use the following syntax as an example: #main.velvet { property: property value; }
   To apply the independent selector use the following syntax: .pizza { property: property value; }
5. ID selectors are used to select a single element on a page. An important note with the id selector is that no two elements on the same page can have the same id attribute. What makes an id selector distinguishable is the flag character that precedes the id selector name. The id and class selectors share a common trait where they can be both have to two state of being either independent or dependent.
   To apply a dependent id selector: div.#maincontent { property: property value; }
   To apply an independent id selector: #menu { property: property value; }
6. Universal selector is used to select all the images on a Web page. It is represented by an asterisk and used to set margin and properties to 0. The universal selector is used at the beginning of the style sheet because it establishes a baseline situation where all the margin and padding are 0.
   To apply a universal selector: * { margin: 0; padding: 0;}
7. Pseudo Selectors are concatenated to CSS classes to add special effects. They exist in CSS but are not directly defined in HTML. The syntax for psuedo selectors are a colon between the selector and pseudo class without any space.
   An example of applying the pseudo class is: .button:hover {property: property value; }

Part Two

Selectors listed in their order of Specificity from highest to lowest:

1. ID selectors
2. Class, attribute and pseudo-class selectors
3. element and pseudo-element selectors
4. universal and inherited selectors