Selectors and Specificity

Selectors choose which elements a CSS rule applies to. When two rules target the same element, specificity decides which one wins. Order from weakest to strongest: element (p) < class (.card) < id (#header) < inline style. If specificity is equal, the rule written last wins.

p { color: black; }          /* element: weakest */
.note { color: blue; }       /* class: beats element */
#intro { color: red; }       /* id: beats class */

/* <p id="intro" class="note">  -> red */

/* Combining selectors */
.card h2 { font-size: 20px; }     /* h2 inside .card */
.btn:hover { opacity: 0.8; }      /* pseudo-class */
input[type="email"] { width: 100%; }  /* attribute */