← HTML & CSS learning pathHTML & CSS · Module 5 of 10
CSS selectors and the cascade
Target elements with selectors and understand which rule wins.
📖 Key ideas
- A rule: selector { property: value; }.
- Selectors: element (p), class (.card), id (#main), descendant (nav a).
- Pseudo-classes: :hover, :focus, :first-child, :nth-child().
- Specificity: id beats class beats element; later rules win ties.
- Inherited properties like color pass from parent to child.
💡 Real-life example: Specificity is like addressing a letter: "Ravi, House 12, MG Road" beats just "Ravi".
.cardSelects elements with class card
#mainSelects the element with id main
:hoverApplies when the mouse is over
SpecificityRule weight that decides which style wins