Unit 2 - Combinators
Descendant Selector - Italic
Child Selector - Blue
Adjacent Sibling Selector - Green
General Sibling Selector - Red
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