Type, Class, and ID Selectors

Every CSS rule starts with a selector. The selector tells the browser which elements the rule applies to. The three selectors you will use most often are the type selector, the class selector, and the ID selector.

Type selectors

A type selector targets every element with a given tag name. No punctuation — just the element name.

h1 {
  color: #2c4a1e;
}

p {
  line-height: 1.6;
}

nav {
  background-color: #2c4a1e;
}

Type selectors apply to every instance of that element on the page. If you target h2, every <h2> gets the style.

Use type selectors for base styles that apply everywhere — body font, heading sizes, paragraph spacing. They are the broadest selector and the lowest in specificity.

Class selectors

A class selector targets elements that have a specific class attribute. Class selectors use a dot (.) prefix.

First, add a class to the HTML:

<article class="tour-card">
  <h3 class="tour-name">Pine Ridge Loop</h3>
  <p>8 miles · Moderate</p>
</article>

<article class="tour-card">
  <h3 class="tour-name">River Canyon Trail</h3>
  <p>12 miles · Challenging</p>
</article>

Then target those classes in CSS:

.tour-card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 1.5rem;
}

.tour-name {
  color: #2c4a1e;
  font-size: 1.25rem;
}

Both <article> elements get .tour-card styles because they both have class="tour-card". One class, applied to many elements — this is the power of class selectors.

An element can have multiple classes:

<article class="tour-card tour-card--featured">

.tour-card--featured {
  border-color: #2c4a1e;
  border-width: 2px;
}

Use class selectors for reusable component styles — cards, buttons, labels, badges. Classes are the workhorse of real-world CSS.

ID selectors

An ID selector targets the one element with a specific id attribute. ID selectors use a hash (#) prefix.

<nav id="main-nav">
  <a href="index.html">Home</a>
  <a href="tours.html">Tours</a>
</nav>

#main-nav {
  background-color: #2c4a1e;
  padding: 1rem 2rem;
}

IDs must be unique — only one element on a page should have a given id. The browser will not error if you duplicate an ID, but behavior is undefined and JavaScript that relies on getElementById will only find the first.

Use ID selectors sparingly. The main problem with IDs in CSS is their high specificity — an ID selector is very difficult to override. Classes can do everything an ID can, with lower specificity and without the uniqueness constraint.

Comparison

	Type	Class	ID
Syntax	h1	.card	#main-nav
Targets	All matching elements	Elements with that class	One specific element
Reusable	No	Yes	No
Specificity	Lowest	Middle	Highest
Best use	Base styles	Components, patterns	Unique landmarks (rarely)

Exercise

Open your Summit Trail Outfitters HTML files and add class attributes to elements that will need specific styling:

1. Add class="tour-card" to each <article> in the tours section of index.html and tours.html.
2. Add class="tour-name" to the <h3> inside each tour card.
3. Add class="site-nav" to the <nav> element in the <header>.

Then in styles.css, write CSS rules targeting each of these classes:

.tour-card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.tour-name {
  color: #2c4a1e;
  margin-bottom: 0.5rem;
}

.site-nav {
  background-color: #2c4a1e;
  padding: 1rem 2rem;
}

Open the browser and confirm the styles apply. The type selector still applies globally, but the class selectors give you targeted control over specific components.

Recap

• Type selectors (h1, p, nav) target all elements with that tag. Use them for base styles.
• Class selectors (.card) target elements with that class. Use them for reusable components.
• ID selectors (#main-nav) target one unique element. Avoid them in CSS — prefer classes.
• An element can have multiple classes. Classes are the primary tool for real-world CSS.
• Type selectors have the lowest specificity; ID selectors have the highest.