02. Basic Selectors — Elements, Classes, and IDs

_{—Part of CSS Primer for the AI Era — Selectors}

Basic selectors are the foundation of all CSS.
They are the simplest way to point at elements in the document,
and they form the vocabulary we use when guiding AI.

Even if someone never writes CSS by hand,
understanding these three selectors gives them enough fluency
to read AI‑generated code and request changes with more confidence.

Element selectors match all elements of a given type.

Examples:

• p → all <p> elements (paragraphs)
• h1 → all top‑level headings
• ul → all unordered lists

Element selectors are broad.
They apply to every instance of that tag in the document.

When to use them

• When the meaning is universal
• When you want a consistent baseline style
• When you’re styling semantic elements (e.g., nav, header, footer)

When to avoid them

• When you need precision
• When only some elements should be styled
• When AI might misinterpret your intent

AI‑steering cue:

“Use an element selector — 
I want all paragraphs styled the same way.”

Class selectors match any element with a given class attribute.

Examples (given class names are aleatory:

• .button → any element with class=“button”
• .warning → any element marked as a warning
• .card → any element with the “card” role

Classes are reusable.
They are the most common and most flexible way to target elements.

Why classes matter:

Classes express purpose, not structure.

.button may describe “this behaves like a button”

.active may describe “this is currently active”

.highlight may describe “this needs emphasis”

This makes class selectors ideal
for AI and human collaboration.

When to use them:

• Use classes when you want to style
  a specific group of elements.
• When meaning matters more than structure
• When you want to keep specificity light

AI‑steering cue:

“Use a class selector — 
this is a role, not a unique element.”

ID selectors match exactly one element
— the one with that ID.

• #main → the element with id=“main”
• #footer → the element with id=“footer”

IDs must be unique in the document.
They are powerful, but they come with a cost: high specificity.

Why IDs are tricky:

Because IDs are so specific, they:

• override class and element selectors
• make future overrides harder
• encourage AI to generate overly heavy selectors
• can lead to a “specificity arms race”

The safest rule is:

• Use IDs only when something is truly unique.

When to use them:

• When an element is one‑of‑a‑kind
• When you need a stable anchor for JavaScript
• When the uniqueness is meaningful (e.g., #site-header)

When to avoid them:

• When styling reusable components
• When you want flexibility
• When AI might over‑commit to a heavy selector

AI‑steering cue

“Avoid using an ID — 
it creates unnecessary specificity.”

The following selectors form a natural hierarchy:

• Elements → broad
• Classes → flexible
• IDs → unique

Most real‑world CSS uses:

• element selectors for global defaults
• class selectors for meaningful styling
• ID selectors only when necessary

This is also the pattern
we want AI to follow.

A simple example:

p {
  line-height: 1.6;
}
 
.article-text p {
  max-width: 65ch;
}
 
.highlight {
  background: yellow;
}
 
#main-title {
  font-size: 2rem;
}

Each selector expresses a different kind of intent:

• p → all paragraphs
• .article-text p → paragraphs in a specific context
• .highlight → any element needing emphasis
• #main-title → the unique page title

This layering is the heart of CSS.

Think of basic selectors as three different ways of saying:

• “All of these”. (element) e.g. p
• “These specific ones”. (class) e.g. .footer
• “This one”. (ID) e.g. #title

This could be all we need to feel fluent.

AI‑steering cue:

“Use a class selector instead of an ID — 
keep the rule flexible.”

• Suggested Next Reading: Combinators — Describing Relationships Between Elements

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←