Unit 1 Explain CSS Basic Selectors

(In Order of Lowest to Highest Specificity)

1. Universal Selector

• selects all HTML elements
• best to use when you need to style a whole page (or majority because you can change specific sections later)
• symbol = *

2. Element Selector

• selects HTML elements based on the name of the element
• best to use when you need to style a whole element like a paragraph or heading
• no symbol

3. Group Selector

• selects multiple HTML elements based on the name of the element
• best to use when you need to style multiple elements in the same way
• each selector is separated by a space

4. Pseudo Elements

• selects and styles specified parts of an element (eg: first letter)
• best to use when you need to style one specific thing
• symbol = selector::pseudo-element

5. Descendant Selector

• selects all elements that are inside an element in an element (descendants)
• best to use when you need to style a section within an element
• each selector is separated by a space

6. Independent Class Selector

• selects HTML elements with a specific class attribute
• best to use when you need to style a specific section
• symbol = .class

7. Dependent Class Selector

• selects a specific HTML element within a specific class attribute
• best to use when you need to style a section of a section
• symbol = p.class

8. Pseudo Selector

• selects and styles a special state of an element (eg: mouse over)
• best to use when you need to style one specific thing
• symbol = selector:pseudo-class

9. Independent ID Selector

• selects HTML elements within a specific ID attribute
• best to use when you need to style a section (with high specificity)
• symbol = #ID

10. Dependent ID Selector

• selects a specific HTML element within a specific ID attribute
• best to use when you need to style a section within a section (with high specificity)
• symbol = p#ID