Selector Types in Action
1. Element Selectors
This paragraph is styled with an element selector: p { color: #374151; }
This heading uses element selector styling
2. Class Selectors
This paragraph has class="highlight" and is styled with .highlight { }
Card Component
This is a card styled with class selectors
Featured Card
This card has both "card" and "featured" classes
3. ID Selectors
This element has id="unique-element" and is styled with #unique-element { }
4. Descendant Selectors
5. Child Selectors
This is a direct child paragraph
This paragraph is nested deeper (grandchild)
Using .parent > p only affects direct children
6. Pseudo-classes
7. Attribute Selectors
Email input styled with input[type="email"]
🎮 Selector Playground
Alpha (first)
Beta
Gamma (special)
Delta
Epsilon (last)
🎯 CSS Specificity
This text demonstrates CSS specificity rules
p { color: black; }
Specificity: 1
.text { color: blue; }
Specificity: 10
#special-text { color: red; }
Specificity: 100 (Winner!)