🎯 Attribute and Pseudo-class Selectors

Why Advanced Selectors?

A selector is a query against your document: it describes a set of elements, and the browser hands the matching ones your styles. Basic selectors describe elements by who they are (a <p>, an element with class="btn"). Advanced selectors let you describe elements by what they carry (their attributes) and how they are behaving right now (their state).

💡 A useful analogy: Basic selectors are like calling out people by name in a crowd. Advanced selectors are like saying "everyone wearing a red badge who is currently raising their hand." You target by trait and behavior — no need to hand each person a name tag first.

The payoff is cleaner HTML. Instead of littering your markup with class="input-required input-invalid" that some JavaScript has to keep in sync, you let CSS read the state the browser already tracks (:required, :invalid) and style it directly.

Attribute Selectors

Attribute selectors target elements by the attributes on their opening tag. The simplest form matches on presence — the attribute exists, regardless of value:

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

/* Any input carrying the required attribute */
input[required] {
  border-left: 3px solid var(--warning-border, #f59e0b);
}

/* Any element with a data-tooltip hook */
[data-tooltip] {
  position: relative;
}

The next form matches an exact value with =. This is how you style one input type differently from another:

input[type="text"] {
  padding: 0.5rem;
  border: 1px solid #ccc;
}

/* Elements with a specific ARIA role */
[role="navigation"] {
  background: #f8f8f8;
}

Substring Attribute Matchers

Four operators match parts of an attribute value. Think of them as the CSS equivalents of "contains", "starts with", and "ends with":

A worked example — icons on outbound and download links, expressed entirely in CSS:

/* External links start with a protocol we don't own */
a[href^="http"]:not([href*="mysite.com"]) {
  padding-right: 1.1em;
  background: url("/img/external.svg") right center / 0.9em no-repeat;
}

/* PDF downloads get a document badge */
a[href$=".pdf"] {
  padding-left: 1.2em;
  background: url("/img/pdf.svg") left center / 1em no-repeat;
}

/* Match "primary" as a full class token, not "primary-btn" */
[class~="primary"] {
  font-weight: 700;
}

Pseudo-classes: State & Structure

A pseudo-class selects an element based on information that isn't in the markup at all — whether the mouse is over it, whether a form field is valid, whether it is the third child of its parent. The browser tracks all of this for you; a pseudo-class simply reads it.

Interaction & Form State

Interaction pseudo-classes respond to what the user is doing right now:

button:hover  { background: #0056b3; color: #fff; }
button:active { transform: translateY(1px); }

/* Show a focus ring ONLY for keyboard users, not mouse clicks */
button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

Form-state pseudo-classes read the validity the browser computes from your HTML constraints — no JavaScript required:

input:required { border-left: 4px solid #cc0000; }
input:valid    { border-color: #16a34a; }
input:invalid  { border-color: #dc2626; }

/* Style the label next to a checked box (adjacent sibling) */
input:checked + label { font-weight: 700; }

input:disabled {
  background: #f1f1f1;
  cursor: not-allowed;
}

Link pseudo-classes have an order that matters. Define them :link → :visited → :hover → :active — remembered as LoVe Hate — or later rules will mask earlier ones. Note that browsers restrict :visited to a handful of color properties for privacy reasons.

Structural Pseudo-classes

These select elements by their position in the document tree. The workhorse is :nth-child(), which accepts either keywords or the an + b formula:

tr:nth-child(odd)   { background: #f5f5f5; }  /* zebra stripes */
li:first-child      { font-weight: 700; }
li:last-child       { border-bottom: none; }

/* an + b formula: a = step, b = offset */
:nth-child(3n + 1)  { }   /* 1st, 4th, 7th, … */
:nth-child(n + 5)   { }   /* the 5th element onward */
:nth-child(-n + 3)  { }   /* only the first three */
div:empty           { display: none; }

Logical Pseudo-classes

These take other selectors as arguments and combine them.

:not() — negation

/* Every list item except the first */
li:not(:first-child) { margin-top: 0.5rem; }

/* Buttons that are neither primary nor secondary */
button:not(.primary):not(.secondary) { background: #6b7280; }

:is() and :where() — grouping

/* Verbose */
header h1, header h2, main h1, main h2, footer h1, footer h2 {
  font-family: Georgia, serif;
}

/* Same result, grouped with :is() */
:is(header, main, footer) :is(h1, h2) {
  font-family: Georgia, serif;
}

:has() — the long-awaited parent selector

For years CSS could only look "downward and rightward". :has() finally lets a selector depend on an element's descendants or following siblings:

/* A form field that CONTAINS a required input */
.field:has(input:required) label::after { content: " *"; color: #dc2626; }

/* A card that contains an image gets extra padding */
.card:has(img) { padding-top: 0.5rem; }

/* Highlight the nav item whose link is the current page */
.nav-item:has(> a[aria-current="page"]) { background: #eef2ff; }

Hands-on Exercise

input:required {
  border-left: 4px solid #f59e0b;
}

/* Only flag once the field has content and lost focus */
input:not(:placeholder-shown):not(:focus):invalid {
  border-color: #dc2626;
  background: #fff5f5;
}
input:not(:placeholder-shown):valid {
  border-color: #16a34a;
}

input[type="checkbox"]:checked + label {
  font-weight: 700;
  color: #16a34a;
}

/* Dim submit while the form still contains an invalid field */
form:has(input:invalid) button[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
}

Summary & Quiz

📚 Further Reading

• MDN — Attribute selectors
• MDN — Pseudo-classes
• CSS Diner — a game for practicing selectors

🚀 What's Next?

You now target elements by attribute and state. Next we'll add combinators — selecting elements by their relationship to other elements (descendants and siblings), so you can style based on document structure itself.