📖 Notes
LESSON 07 OF 32
CSS Selectors, Specificity & the Cascade
Targeting HTML Elements
CSS selectors let you precisely target any element. Learn specificity rules so you always know which style wins.
Specificity
Which Rule Wins
Common Selector Types
Selectors
CSS/* Element */
p { color: blue; }
/* Class */
.card { background: white; }
/* ID */
#hero { height: 100vh; }
/* Pseudo-class */
button:hover { background: #4f9eff; }
/* Attribute */
input[type="email"] { border: 2px solid blue; }
/* Direct child */
div > p { margin: 0; }
⚠️
Avoid !important
Because !important beats every other rule regardless of specificity, overusing it makes future style overrides nearly impossible without adding another !important — a common source of unmaintainable CSS.