CSS Selectors 101: Targeting Elements with Precision

You've written your HTML. You have headings, paragraphs, buttons, and links. Now you want to style them — make the heading blue, the buttons rounded, one specific paragraph bold.

But CSS can't read your mind. It needs you to point at exactly what you want to style.

That's what selectors do. They're the targeting system of CSS.

What is a CSS Selector?

A selector is the part of a CSS rule that identifies which HTML elements should receive the styles.

css

p {
  color: blue;
}

Here, p is the selector. It says: "Find all paragraph elements and make them blue."

Every CSS rule follows this pattern:

selector {
  property: value;
}

The selector answers the question: "What am I styling?"

Thinking About Selectors: An Analogy

Imagine you're in a room full of people and you need to give instructions to specific individuals.

You could say:

• "Everyone wearing a hat, raise your hand" → targets a group with a shared trait
• "The person named Alex, come here" → targets one specific individual
• "All the teachers in the room, please stand" → targets everyone of a certain type

CSS selectors work the same way:

• Element selectors target all elements of a type (all paragraphs, all headings)
• Class selectors target elements with a shared trait (a class name)
• ID selectors target one specific element (a unique identifier)

Let's look at each one.

Element Selector

The simplest selector. It targets every element of a specific HTML tag.

css

p {
  color: gray;
}

h1 {
  font-size: 2rem;
}

This makes every 

 gray and every
 larger. No exceptions — if it's that tag, it gets the style.

HTML:

html

<h1>Welcomeh1>
<p>First paragraph.p>
<p>Second paragraph.p>

Result: All paragraphs turn gray. The heading becomes 2rem.

When to use: When you want consistent styling across all instances of a tag. Base styles for paragraphs, headings, links, and lists often use element selectors.

Class Selector

Classes let you target specific elements that you've marked in your HTML. Multiple elements can share the same class.

In HTML, you assign a class with the class attribute:

html

<p class="highlight">This is important.p>
<p>This is normal.p>
<p class="highlight">This is also important.p>

In CSS, you select classes with a dot (.):

css

.highlight {
  background-color: yellow;
}

Result: Only the two paragraphs with class="highlight" get a yellow background. The middle paragraph is untouched.

Key points about classes:

• Class names start with a dot in CSS: .classname
• The same class can be applied to many elements
• One element can have multiple classes: class="highlight bold large"
• Classes are reusable — that's their purpose

When to use: Whenever you need to style a subset of elements. Buttons, cards, warning messages, highlighted text — classes handle all of these.

ID Selector

IDs target one unique element. Each ID should appear only once per page.

In HTML, you assign an ID with the id attribute:

html

<h1 id="main-title">Welcome to My Siteh1>

In CSS, you select IDs with a hash (#):

css

#main-title {
  color: navy;
  border-bottom: 2px solid navy;
}

Result: Only that one heading gets the style.

The rule: One ID, one element. If you find yourself wanting to use the same ID twice, you need a class instead.

Class vs ID: When to Use Which

Class (.) — Use for styling multiple elements. Classes are reusable and flexible. Most of your styling will use classes.

ID (#) — Use for one unique element. IDs have higher specificity, which can make overriding styles harder. Reserve them for unique landmarks like a header, footer, or main content area.

Rule of thumb: Default to classes. Use IDs sparingly.

Group Selectors

What if multiple selectors need the same style? You could repeat yourself:

css

h1 {
  font-family: Arial, sans-serif;
}

h2 {
  font-family: Arial, sans-serif;
}

h3 {
  font-family: Arial, sans-serif;
}

Or you could group them with commas:

css

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Same result, one-third the code. The comma means "and" — apply this style to h1 and h2 and h3.

You can group any selectors together:

css

.btn, .link, #submit-button {
  cursor: pointer;
}

Descendant Selectors

Sometimes you want to target elements inside other elements. Descendant selectors use a space to express this relationship.

css

.sidebar a {
  color: green;
}

This targets  elements that are inside an element with class sidebar. Links elsewhere on the page aren't affected.

HTML:

html

<div class="sidebar">
  <a href="#">Sidebar linka>  
div>

<a href="#">Regular linka>  

More examples:

css

/* List items inside the navigation */
nav li {
  display: inline-block;
}

/* Paragraphs inside the article */
article p {
  line-height: 1.8;
}

/* Spans inside highlighted paragraphs */
.highlight span {
  font-weight: bold;
}

Descendant selectors let you scope styles to specific sections without adding extra classes everywhere.

Selector Priority (Specificity)

What happens when multiple rules target the same element with conflicting styles?

css

p {
  color: blue;
}

.special {
  color: green;
}

#unique {
  color: red;
}

html

<p class="special" id="unique">What color am I?p>

The paragraph has all three selectors targeting it. Which wins?

CSS uses specificity — more specific selectors override less specific ones.

The hierarchy, from lowest to highest:

1. Element selectors (p, div, h1) — lowest specificity
2. Class selectors (.classname) — medium specificity
3. ID selectors (#idname) — highest specificity

So in our example, the paragraph is red. The ID selector wins because it's most specific.

Don't over-rely on IDs for styling. When everything is high-specificity, overriding styles later becomes painful. Classes give you flexibility.