CSS Selectors: Targeting Elements

Why CSS Selectors Are Needed

You've built an HTML structure. Now you want to style it. Make headings blue. Give paragraphs a margin. Add borders to images.

The problem: How do you tell CSS which elements to style?

You can't just say "make things blue." You need to be specific:

• Make all paragraphs blue

• Make this specific div blue

• Make elements with class 'highlight' blue

CSS selectors are how you choose which elements to style.

---

Element Selector

The element selector targets all elements of a specific type.

HTML, CSS:

What you'll see:

• The <h1> is dark green and 32px

• ALL three <p> elements are blue and 16px

• The <div> has a black border with padding

When to use: When you want consistent styling across all elements of one type. All headings should be bold. All links should be underlined. All images should have rounded corners.

Limitation: You can't be selective. If you style all <p> elements, you style all of them. What if you only want some paragraphs blue?

That's where classes come in.

---

Class Selector

The class selector targets elements with a specific class attribute.

HTML, CSS:

What you'll see:

• First and third paragraphs look normal

• Second paragraph has yellow background

• The div also has yellow background (same class, different element)

• The span has yellow background AND bold text (multiple classes)

• The alert paragraph is red with a red border

Why it's powerful: You decide which elements get the class. Add class="highlight" to any element, and it gets styled.

Multiple elements with the same class:

<p class="highlight">First</p>
<div class="highlight">Second</div>
<span class="highlight">Third</span>

All three get yellow backgrounds, even though they're different element types.

Multiple classes on one element:

<p class="highlight bold">Important text</p>

The paragraph gets both styles: yellow background and bold text.

When to use: When you want reusable styles. Create a class once, apply it to multiple elements. This is the most common selector in CSS.

Naming convention: Use descriptive names: .card, .button, .container, .error-message. Avoid generic names like .blue or .big (because you might change the color or size later).

ID Selector

The ID selector targets a single unique element.

HTML, CSS:

What you'll see:

• Navy header with white text, centered

• Light gray main section with padding

• Dark gray footer with white text, centered

• Each section is visually distinct

Important rule: IDs must be unique. Only one element per page should have a specific ID.

When to use: For unique page elements. The main header. The navigation bar. The footer. Things that appear once per page.

Class vs ID - when to use which?

Modern practice: Use classes most of the time. IDs are mainly for JavaScript targeting or page anchors. In CSS, classes are more flexible.

---

Group Selectors

What if you want the same style for multiple element types?

HTML, CSS:

What you'll see:

• All three headings (h1, h2, h3) are navy and use Arial

• Paragraphs, list items, and spans all have 1.6 line height and dark gray color

• All three buttons/links have blue background, white text, and padding

When to use: When multiple different selectors need identical styling. Saves code and ensures consistency.

---

Descendant Selectors

What if you only want to style paragraphs inside a specific div?

HTML, CSS:

What you'll see:

• Paragraph inside .content is blue and 18px

• Paragraph outside any container has default styling

• Paragraph inside .sidebar is gray, italic, and 14px

• Only the span inside #main has yellow background

• The span outside #main doesn't get yellow (descendant selector is specific)

• Deeply nested paragraph has green left border

Syntax:

parent child

A space between selectors means "select child elements inside parent."

Any level of nesting works: The .container div p selector works even though p is nested inside a div inside .container.

When to use: When you want context-specific styling. Paragraphs in the sidebar should look different from paragraphs in the main content. Links in the navigation should style differently from links in articles.

---

Selector Priority (Specificity Basics)

What happens if multiple selectors target the same element?

HTML, CSS:

What you'll see:

• First paragraph: blue (only element selector applies)

• Second paragraph: green (class beats element)

• Third paragraph: red (ID beats class and element)

• First h1: orange (only element selector)

• Second h1: purple (class beats element)

• Third h1: brown (ID beats everything)

Priority order (low to high):

1. Element selectors: p, div, h1

2. Class selectors: .intro, .card

3. ID selectors: #welcome, #main

The simple rules:

• IDs beat classes beat elements

• More specific beats less specific

• Last rule wins when equal

---

Putting It All Together

HTML, CSS:

What you'll see:

• Everything is centered in a max-width container

• The h1 title is navy, centered, and uses Georgia font (ID + element + group selectors)

• Main section has light gray background

• Intro paragraph is bold with light yellow background

• Normal paragraph has regular styling with 1.6 line height

• Sidebar has light blue background

• Sidebar h2 is dark blue and uses Georgia font

• Sidebar paragraphs are smaller (14px) and gray colored

This example demonstrates:

• Element selectors for base styling

• ID selectors for unique elements

• Class selectors for reusable styles

• Descendant selectors for context-specific styling

• Group selectors for consistent typography

---

Common Beginner Mistakes

Mistake 1: Forgetting the dot for classes

/* Wrong */
highlight {
  color: yellow;
}

/* Right */
.highlight {
  color: yellow;
}

Mistake 2: Forgetting the hash for IDs

/* Wrong */
header {
  background: navy;
}

/* Right */
#header {
  background: navy;
}

Mistake 3: Using spaces when you don't mean descendant selector

/* This targets <p> inside .intro */
.intro p {
  color: blue;
}

/* This targets elements with BOTH classes */
.intro.highlight {
  color: blue;
}