CSS Selectors

A selector is the part of a CSS rule that tells the browser which HTML elements a set of styles should apply to. Every rule you write starts with a selector, followed by a declaration block wrapped in curly braces, and choosing the right selector is what separates precise, maintainable stylesheets from fragile ones.

CSS ships with several selector categories — type (element), class, ID, attribute, and combinators that describe relationships between elements. Understanding how each one targets the DOM, and how they can be combined, is the foundation for everything else in CSS, including the cascade and specificity rules covered later in this module.

Why it matters

A selector decides which elements a rule applies to, so every line of CSS you write starts with one. Choosing a selector that is too broad restyles things you did not intend, and one that is too narrow breaks as soon as the markup changes. Combinators and attribute selectors let you target elements precisely without adding a class to everything.

Basic Selector Types

The four most common selectors form the backbone of nearly every stylesheet.

• Type (element) selector — targets every instance of an HTML tag, e.g. p { } styles all paragraphs.
• Class selector — starts with a dot and targets any element carrying that class, e.g. .card { }. Classes are reusable across many elements.
• ID selector — starts with a hash and targets the single element with that id attribute, e.g. #header { }. IDs must be unique per page.
• Universal selector — the asterisk * matches every element, often used for resets like * { box-sizing: border-box; }.

Attribute Selectors

Attribute selectors match elements based on the presence or value of an HTML attribute, using square brackets. [disabled] matches any element with a "disabled" attribute regardless of value, while [type="email"] matches only elements whose "type" attribute equals "email" exactly. Partial-match operators add flexibility: [class^="btn-"] matches values that start with "btn-", [class$="-icon"] matches values ending in "-icon", and [class*="nav"] matches values containing "nav" anywhere.

Combinators

Combinators describe the relationship between two selectors rather than matching an isolated element.

• Descendant combinator (space) — article p selects any <p> nested anywhere inside an <article>, at any depth.
• Child combinator (>) — ul > li selects only <li> elements that are direct children of a <ul>, not grandchildren.
• Adjacent sibling combinator (+) — h2 + p selects a <p> that immediately follows an <h2> at the same nesting level.
• General sibling combinator (~) — h2 ~ p selects every <p> that shares a parent with an <h2> and comes after it, not just the first one.

Grouping Selectors

A comma lets you apply the same declaration block to multiple, unrelated selectors without repeating yourself: h1, h2, h3 { font-family: sans-serif; } applies the same font to all three heading levels in a single rule.

Examples

<!-- HTML context -->
<!--
<nav class="site-nav">
  <a href="/">Home</a>
  <a href="/about" class="active">About</a>
</nav>
<form>
  <input type="email" required>
</form>
-->

.site-nav > a {
  color: #333;
  text-decoration: none;
}

.site-nav > a.active {
  font-weight: bold;
  color: #0057d9;
}

input[type="email"][required] {
  border: 1px solid #d9534f;
}

Direct-child nav links are unstyled by default, the "active" link is bold and blue, and any required email input gets a red border to flag it as mandatory.

<!--
<ul class="menu">
  <li>Item 1
    <ul><li>Sub-item</li></ul>
  </li>
  <li>Item 2</li>
</ul>
-->

.menu li { color: black; }        /* matches ALL li, including nested */
.menu > li { font-weight: bold; } /* matches only the two top-level li */

Every list item (including the nested sub-item) is black, but only the two direct children of .menu ("Item 1" and "Item 2") appear bold.

Exercise

Using only selectors (the page has no classes), make every paragraph inside main grey; make the paragraph that comes directly after the heading italic; and make a button that is a direct child of main bold.

Expected result: the paragraph is grey and italic, and the button text is bold.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

/* TODO: paragraphs anywhere inside main: grey */

/* TODO: the paragraph immediately after the h1: italic */

/* TODO: a button that is a direct child of main: bold */

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main p {
  color: gray;
}

h1 + p {
  font-style: italic;
}

main > button {
  font-weight: bold;
}

Quick quiz

Interview questions