CSS Selectors

Selectors tell CSS which elements to style. Picking the right one keeps your stylesheets small and predictable.

Basic selectors

h1 { color: #00ff41; }        /* element */
.card { border: 1px solid; }  /* class — reuse anywhere */
#hero { padding: 2rem; }      /* id — unique, use sparingly */

Combinators

Combinators describe relationships between elements.

nav a { color: inherit; }          /* descendant: a inside nav */
ul > li { margin-left: 0; }       /* child: direct li of ul */
h2 + p { margin-top: 0.5rem; }    /* adjacent sibling: p right after h2 */
section p { line-height: 1.6; }   /* any descendant */

Pseudo-classes

Pseudo-classes select elements in a state or position.

a:hover { color: #00cc34; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid; }

Specificity

When rules conflict, specificity decides the winner. Roughly: id > class > element. A more specific rule beats a less specific one, regardless of order.

.card { color: red; }      /* 1 class */
div.card { color: blue; }  /* 1 element + 1 class — wins */