CSS Selectors 101: Targeting Elements with Precision

CSS works as a selector of HTML elements

When you write CSS, you aren't just picking colors and fonts; you are telling the browser exactly which elements on the page should receive those styles. Without selectors, your CSS has no idea where to go.

The Element Selector

This is the most basic way to style. You simply type the name of the HTML tag. This targets every single instance of that tag on the page.

• Analogy: Yelling "Human!"

• Syntax: Just the tag name (e.g., p, h1, div).

Example: I want every paragraph on my website to have blue text

p {
  color: blue;
}

Result: Every single <p> tag turns blue. This is great for setting defaults, but bad if you want one specific paragraph to look different.

The Class Selector

This is the workhorse of CSS. You will use this 90% of the time.

A Class is a reusable name you give to specific elements in your HTML. You can give the same class to as many elements as you want. In CSS, you target a class using a dot (.).

• Analogy: Yelling "Everyone in a blue shirt!"

• Syntax: .classname

The HTML:

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

The CSS:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Result: Only the first and third paragraphs get the yellow background. The middle one stays plain.

---

The ID Selector

An ID is like a social security number or a fingerprint. It must be unique. You can only use a specific ID once per page. In CSS, you target an ID using a hash (#).

• Analogy: Yelling "John Smith!"

• Syntax: #idname

The HTML:

<div id="main-header">Welcome</div>

The CSS:

#main-header {
  font-size: 50px;
  text-align: center;
}

Result: This styling applies only to that one specific header element.

Grouping Selectors

Sometimes you want different elements to look the same. Instead of writing the same code twice, you can group selectors using a comma (,).

The Slow Way:

h1 { font-family: Arial; }
h2 { font-family: Arial; }
p { font-family: Arial; }

The Efficient Way:

h1, h2, p {
  font-family: Arial;
}

Result: All three elements share the same font.

Descendant Selectors

Sometimes you want to target an element only when it is inside another element. This is called a Descendant Selector. You separate the selectors with a space.

• Syntax: Container Child (e.g., div p)

The Scenario: You want links (<a>) in your navigation menu to be white, but links in your main text to be blue.

The CSS:

/* Affects only 'a' tags inside 'nav' */
nav a {
  color: white;
}

/* Affects only 'a' tags inside 'p' */
p a {
  color: blue;
}

Who Wins?

What happens if you have conflicting rules?

p { color: red; }       /* Element Selector */
.text { color: green; } /* Class Selector */
#unique { color: blue; }/* ID Selector */

If you have a paragraph <p id="unique" class="text">, What color will it be?

The Hierarchy of Power:

1. ID Selector (#) - Most Powerful

2. Class Selector (.) - Medium Power

3. Element Selector (p) - Least Powerful

The paragraph will be Blue because the ID is the most specific selector. It overrides the others.

---

Summary Cheat Sheet

Resources:

https://developer.mozilla.org/en-US/docs/Web/CSS
https://css-tricks.com/guides/
https://en.wikipedia.org/wiki/CSS