CSS Selectors 101: Targeting Elements with Precision

Topics to Cover

1. Why CSS selectors are needed

2. Element selector

3. Class selector

4. ID selector

5. Group selectors

6. Descendant selectors

7. Selector priority

Why CSS selectors are needed

CSS selectors are needed because they allow developers to target specific HTML elements for styling. Without them, it would be impossible to apply styles like color, fonts, layout spacing on a webpage.

Without selectors, we cannot control styling with any precision. You might be applying style either everything or nothing.

Selector gives you power to make :
1. Make all paragraphs have this font size.
2. Make elements with class “highlight“ have a yellow background.
3. Make the element with id “header” have larger font.

How to define a selector:

selector {
property: value;
}

Element selector

The element selector targets all elements of a specific HTML tag type. It's the most basic and straightforward selector.

Examples

Style all paragraphs:

p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

This targets every <p> element in your HTML and applies these styles to all of them.

Style all headings:

h1 {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
}

Each h1 gets styling.

Style all links:

a {
  color: blue;
  text-decoration: underline;
}

Limitation: You cannot be selective within a tag type. If you use an element selector for p it affects ALL paragraphs. For more precision, you need class or ID selectors.

Class Selector

The class selector targets elements based on their class attribute. Classes can be reusable, multiple elements can share the same class, and one element can have multiple classes.

Syntax

HTML:

<element class="className">

CSS:

.className {
  /* styles */
}

Create button styles:

HTML:

<button class="btn-primary">Save</button>
<button class="btn-secondary">Cancel</button>

CSS:

.btn-primary {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Each button class creates a different visual style.

ID Selector:

The ID selector targets a single, unique element based on its id attribute. Unlike classes which can be reused, each ID should appear only once per page.

Syntax

HTML:

<element id="uniqueName">

CSS:

#uniqueName {
  /* styles */
}

Notice the hash symbol # before the ID name in CSS.

Group selector

Group selectors give us power to apply the same styles to multiple different selectors simultaneously. Which helps us to not define or rewrite the same style for different selectors.

Syntax

selector1, selector2, selector3 {
  /* shared styles */
}

Example

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #2c3e50;
  margin-bottom: 10px;
}

By using this h1,h2,h3 have same css style gets applied, like font-family, colour, and margin-bottom.

Descendant selectors

Descendant selectors are the selectors that target elements which are inside other elements. They let you be more specific about which elements to style based on their position in the HTML structure.

Syntax

ancestor descendant {
  /* styles */
}

Examples

Style links only inside navigation:

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

<main>
  <p>Read <a href="#article">this article</a></p>
</main>

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

Only links inside <nav> get white, bold, no-underline styling. The link inside <main> remains default styled.

Selector priority

When multiple CSS rules target the same element, what will happen? Which CSS style gets applied is determined by specificity (priority).
The Basic Hierarchy (Simplified)

From least specific to most specific:

1. Element selectors (lowest specificity)

2. Class selectors (medium specificity)

3. ID selectors (high specificity)

4. Inline styles (highest specificity)

Example 1: Element vs Class

p {
  color: blue;  /* Element selector */
}

.highlight {
  color: red;   /* Class selector - MORE SPECIFIC */
}

<p class="highlight">What color is this?</p>

Result: The text is red because class selectors override element selectors.

Example 2: Class vs ID

.highlight {
  color: red;   /* Class selector */
}

#special {
  color: green; /* ID selector - MORE SPECIFIC */
}

<p class="highlight" id="special">What color is this?</p>

Result: The text is green because ID selectors override class selectors.

Conclusion

CSS selectors are your primary tool for targeting elements with precision. Understanding how to choose the right selector whether you need to style all paragraphs, a specific group of elements, or one unique section is fundamental to writing effective CSS.