CSS Selectors for HTML: Targeting Elements

A selector says which HTML elements a rule applies to. These are the ones you will use most.

Selector	Matches	Example
Element	All elements of that type	`p`
Class	Elements with that class	`.note`
Id	The element with that id	`#intro`
Descendant	Elements inside another	`article p`
Group	Several selectors at once	`h1, h2`

index.html

HTML

<style>
  p { color: #49454f; }
  .note { background: #fff3ec; padding: 6px; }
  #intro { font-size: 1.25em; }
  article em { color: #b84624; }
  h1, h2 { font-family: Georgia, serif; }
</style>

<h1>Notes</h1>
<p id="intro">Welcome.</p>
<p class="note">A note.</p>
<article><p>Some <em>emphasis</em> inside an article.</p></article>

When rules disagree: the cascade

If two rules set the same property on the same element, CSS picks one.

A more specific selector wins. An id beats a class, and a class beats an element.
If specificity is equal, the later rule wins.
Inline style beats stylesheet rules.

index.html

HTML

<style>
  p { color: grey; }
  .warning { color: firebrick; }
</style>
<p class="warning">This paragraph is firebrick, not grey.</p>

lightbulb

Prefer classes

Classes are specific enough to be useful and flexible enough to reuse. Ids are very specific and hard to override later.