CSS Selectors

Selectors tell CSS which HTML elements to style. You can select by tag name, class, id, or group many selectors together.

Basic Selectors

Selectors tell CSS which HTML elements to style. You can select by tag name, class, id, or group many selectors together.

Real-life example: Tag selector (p) is like saying all students. Class (.card) is like saying all students in the science club. Id (#logo) is like one specific student with a unique roll number.

Element, class, id, and grouping

/* All paragraphs */
p { line-height: 1.6; }

/* All elements with class="card" */
.card {
  border: 1px solid #e2e8f0;
  padding: 1rem;
}

/* One unique element with id="logo" */
#logo {
  font-weight: 800;
  font-size: 1.25rem;
}

/* Group selectors — same styles for many */
h1, h2, h3 {
  color: #0f172a;
}

Combinators

Combinators describe relationships between elements. Descendant (space), child (>), adjacent sibling (+), and general sibling (~) help you target nested or nearby elements.

Real-life example: Descendant selector is like all books inside a library. Child selector is like books only on the front shelf, not in the back room.

Combinator examples

/* All <a> inside .nav (any depth) */
.nav a {
  text-decoration: none;
  color: #0891b2;
}

/* Direct <li> children of .menu only */
.menu > li {
  list-style: none;
}

/* <p> immediately after <h2> */
h2 + p {
  margin-top: 0.25rem;
  color: #64748b;
}

/* All <p> siblings after <h2> */
h2 ~ p {
  font-size: 0.95rem;
}

Attribute Selectors

Attribute selectors match elements by their HTML attributes — like type, href, or data-* values. They are useful for forms and links.

Real-life example: Attribute selectors are like finding people by uniform color or badge type, not just by name.

Common attribute patterns

/* Inputs with type="text" */
input[type="text"] {
  border: 1px solid #cbd5e1;
  padding: 0.5rem;
}

/* Links that open in new tab */
a[target="_blank"] {
  color: #7c3aed;
}

/* Any element with a title attribute */
[title] {
  cursor: help;
}

/* Class starts with "btn-" */
[class^="btn-"] {
  border-radius: 999px;
  font-weight: 600;
}

Pseudo-classes

Pseudo-classes style an element in a special state — like when you hover, focus, or visit a link. They start with a single colon (:).

Real-life example: :hover is like a shop door that lights up when you walk near it. :focus is like a microphone that glows when someone is speaking.

Useful pseudo-classes

a:link { color: #0891b2; }
a:visited { color: #6366f1; }
a:hover { text-decoration: underline; }
a:active { color: #be123c; }

input:focus {
  outline: 2px solid #0891b2;
  border-color: #0891b2;
}

li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f1f5f9; }

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Pseudo-elements

Pseudo-elements style a specific part of an element. They use double colons (::). Common ones are ::before, ::after, and ::first-line.

Real-life example: ::before is like adding a decorative sticker before a book title. ::first-line is like highlighting only the first sentence of a paragraph.

Prefer class selectors for styling hooks. Use id only when something is truly unique on the page.

Pseudo-element examples

h1::first-letter {
  font-size: 2.5rem;
  color: #0891b2;
}

.quote::before {
  content: "“";
  color: #94a3b8;
  font-size: 2rem;
}

.quote::after {
  content: "”";
  color: #94a3b8;
}

p::first-line {
  font-weight: 600;
}

input::placeholder {
  color: #94a3b8;
}