CSS Selectors

How CSS selectors target elements

A selector is the pattern that tells CSS which elements to style. Selectors range from simple to highly specific, and mastering them is the key to writing CSS you can actually control.

The three basic selectors

• Element — p matches every paragraph.
• Class — .btn matches any element with class="btn". Reusable across many elements.
• ID — #logo matches the single element with that id. Unique per page.

Combinators

Combine selectors to target nested elements precisely:

/* descendant — any .item anywhere inside .list */
.list .item { }

/* child — only DIRECT children */
.list > .item { }

/* adjacent sibling */
h2 + p { margin-top: 0; }

The descendant combinator (a space) matches at any depth. The child combinator (>) matches only immediate children — stricter and often safer.

Pseudo-classes

A pseudo-class targets an element's state, selected with a colon:

a:hover { color: red; }
input:focus { border-color: blue; }
li:nth-child(odd) { background: #eee; }

Note: pseudo-classes (:hover) describe state, while pseudo-elements (::before) create or style a part of an element — the double colon distinguishes them.

Specificity

When two rules collide, the more specific one wins. Specificity is a three-part score (ID, class, element):

• #nav .item → (1, 1, 0)
• div .item → (0, 1, 1)

IDs beat classes, classes beat elements. Only !important overrides specificity — use it sparingly, because it becomes a maintenance trap.

Prefer classes over IDs for styling. IDs are extremely specific and hard to override, which fights you as a codebase grows.