CSS Selectors

What You’ll Learn

CSS selectors are patterns that choose which HTML elements receive styles. This hub covers 59 selector tutorials — from basic p and .class to combinators, pseudo-classes, pseudo-elements, and attribute matching.

Introduction

CSS selectors are patterns used to select elements on a web page and apply styles. They define the look and layout of a website by targeting specific HTML elements — without changing the HTML structure itself.

What Are CSS Selectors?

A selector tells the browser which elements get the declarations in a rule. You can target by element type (p), class (.card), ID (#header), attributes ([disabled]), structure (div > p), or state (a:hover).

Selectors vs Properties

• Selector — who to style — .btn
• Property — what to change — background-color
• Value — how to change it — #2563eb
• Rule — .btn { background-color: #2563eb; }

📝 Syntax

Every CSS rule pairs a selector with a declaration block:

/* Element */
p { color: #334155; }

/* Class */
.highlight { background: #fef08a; }

/* ID */
#footer { text-align: center; }

/* Pseudo-class */
a:hover { text-decoration: underline; }

Selector families

Understanding Specificity

When two rules conflict, the browser picks the winner by specificity (then source order):

• Inline style — highest (avoid overusing)
• ID selectors — #nav beats classes
• Classes, attributes, pseudo-classes — .btn, [open], :hover
• Elements and pseudo-elements — p, ::before

Prefer low-specificity selectors — especially classes — so your CSS stays easy to override and maintain.

When to Use Which Selectors

• Reusable components — .class on buttons, cards, and badges.
• Page structure — header, main, footer element selectors.
• Unique regions — #skip-link sparingly for one-off landmarks.
• Navigation menus — nav a or nav > ul > li combinators.
• Forms — :focus, :invalid, :checked, [required].
• Links — :link, :visited, :hover, :active (LVHA order).

Examples Gallery

Five starter snippets covering the most common selector types. Open linked tutorials for live try-it editors.

p { color: #334155; }
.highlight { background: #fef08a; }
#footer { text-align: center; }

nav a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  color: #7c3aed;
  text-decoration: underline;
}

a[href^="https"] {
  color: #059669;
}

.note::before {
  content: "📝 ";
}

💬 Usage Tips

• Prefer classes — Reusable, low specificity, easy to maintain.
• Keep selectors short — .card-title beats div div h3 span.
• LVHA for links — Style in order: :link, :visited, :hover, :active.
• DevTools inspect — See which selectors match and which rules win.
• Search this index — Jump to any of 59 tutorials instantly.

⚠️ Common Pitfalls

• Overusing IDs — High specificity makes overrides painful.
• Deep descendant chains — div div div p is fragile and slow.
• Universal selector resets — * affects every element; scope carefully.
• :hover-only interactions — Touch devices need :focus and tap targets too.
• Missing ::before content — Pseudo-elements need a content value to render.

♿ Accessibility

• :focus styles — Never remove focus outlines without a visible replacement.
• :focus-visible — Consider keyboard-only focus rings where supported.
• Color-only :invalid — Pair validation color with text or icons.
• :visited privacy — Only safe properties can be styled on visited links.
• Meaningful labels — Selectors style elements; accessible names come from HTML.

💡 Best Practices