YouTipSelectors
p { } /* element */
.class { } /* class */
#id { } /* id */
div.card { } /* combined */
p:first-child { } /* pseudo-class */
a:hover { } /* hover state */Specificity
Inline > ID > Class > Element. More specific selectors win.
/* Specificity: 0-0-1 */ p { color: blue; }
/* Specificity: 0-1-0 */ .text { color: red; }
/* Specificity: 1-0-0 */ #main { color: green; }Summary
- Use classes for reusable styles
- Higher specificity overrides lower
- Avoid !important when possible