Common CSS Selectors

Choose which HTML elements a CSS rule styles

1. Element selector

Example: h3

Targets every element with that tag name.

2. Class selector

Example: .selector-class-demo

Targets every element carrying that class. Classes are the usual choice for reusable styles.

3. Descendant selector

Example: .selector-descendant-demo h6

Targets matching elements anywhere inside a chosen ancestor.

4. Attribute selector

Example: input[type="email"]

Targets elements whose attribute matches the requested value.

5. Grouped selectors

Example: .selector-note, .selector-tip

Separate selectors with commas when they share declarations.
Grouping keeps the stylesheet DRY.

Reading a selector

  1. Find the selector before the opening brace.
  2. Match it against elements in the HTML.
  3. Apply the declarations only to those matches.
  4. Prefer simple classes when a style should be reusable.

Important HTML

Selectors match the markup shapes below.

<p id="title" class="note">…</p>
<p class="note">…</p>

Important CSS

Match by element, class, id, or ancestry.

p { color: #1a1a1a; }
.note { font-weight: 700; }
#title { color: #1f3a2e; }
.box p { margin: 0 0 8px; }