Yes—you can style a website without adding class or id attributes. Use semantic HTML as the foundation, then target elements with type selectors, relationships, existing attributes, and pseudo-classes. The trade-off is that selectors tied to markup structure can break or change meaning when that structure changes, so this approach works best when the document’s semantics genuinely distinguish what you want to style.
Start with meaningful HTML and type selectors
A CSS selector identifies the HTML elements that receive a rule’s declarations. Type selectors match elements by their tag names, so they need no class or ID:
As an Amazon Associate I earn from qualifying purchases.
body {
font-family: system-ui, sans-serif;
}
h1 {
line-height: 1.2;
}
p {
max-width: 65ch;
}
a {
color: #1457a6;
}Choose elements for what they mean in the document or interface: header, nav, main, article, section, footer, headings, lists, links, buttons, and form controls. Then style broad defaults with selectors such as body, h1, p, and a. Semantic elements should describe the content, not be rearranged or misused just to create styling hooks.
Use relationships when the document relationship matters
Combinators let a selector target elements based on their relationship to other elements. A descendant selector such as nav a matches links anywhere inside a navigation element; a child selector such as article > h2 matches only second-level headings that are direct children of an article.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
nav a {
text-decoration: none;
}
article > h2 {
margin-block-start: 1.5em;
}Use these when the relationship reflects the document’s meaning or design. If a later markup edit changes nesting or order, a structure-based selector may stop matching the intended elements—or start matching different ones. Avoid relying on incidental nesting when it does not represent a real distinction.
Match existing attributes and element states
Attribute selectors can target attributes already present for functional or semantic reasons. For example, input[type="email"] matches email inputs, while a[href$=".html"] matches links whose href value ends in .html.
input[type="email"] {
border-color: #526b8a;
}
a[href$=".html"] {
text-underline-offset: 0.15em;
}Do not add misleading or unnecessary attributes solely to make a selector possible. The W3C’s Selectors Level 3 specification describes selectors for attribute values and document structure; attributes are most useful as hooks when they already belong in the markup.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Pseudo-classes target element states without requiring a class or ID. Examples include hover, visible keyboard focus, and a checked form control:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
a:hover {
text-decoration: underline;
}
button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
input:checked {
accent-color: #1457a6;
}A selector list can also share a declaration among different element types:
h1, h2, h3 {
font-family: Georgia, serif;
}Know when avoiding IDs and classes helps—and when it does not
Google’s HTML/CSS Style Guide says, “Avoid ID selectors.” Its concern is that IDs are expected to be unique across a page, which can be difficult to guarantee when components are developed by many engineers. Avoiding ID selectors also keeps styles away from their higher specificity: MDN explains that ID selectors outrank class selectors in the cascade’s specificity calculation. That makes IDs harder to override than classes in ordinary author styles.
But avoiding IDs and classes is a style choice, not a CSS requirement. A reusable class is often the clearer hook when repeated components need different visual treatments and semantic elements or existing attributes do not distinguish them. Otherwise, a selector may end up depending on child order or nesting that can change for unrelated reasons. IDs can also remain useful for unique document identifiers, such as fragment links, even if a project does not use them for styling.
| Consideration | Structure-based selectors | Class-based styling |
|---|---|---|
| Markup meaning | Best when the selected element or relationship expresses genuine document semantics. | Provides an explicit styling hook, but should not replace meaningful HTML structure. |
| Reuse | Works across pages when the same semantic elements and relationships recur. | Can be applied deliberately to the intended components across different structures. |
| Resilience to markup edits | May change unexpectedly if nesting or element order changes. | Often preserves the intended styling through structural changes if the class stays attached. |
| Cascade control | Specificity depends on the selectors used; avoiding IDs avoids their higher specificity. | Classes are explicit hooks with lower specificity than IDs. |
| Distinguishing visual variants | Can be awkward if semantic markup does not distinguish repeated variants. | Makes a visual variant explicit when no natural semantic distinction exists. |
A practical way to build without styling hooks
- Write semantic markup first. Choose elements for the content and interface, not for their appearance.
- Apply broad rules with type selectors. Establish defaults for the page, headings, paragraphs, links, and controls.
- Add relationships only where they carry meaning. Use selectors such as
nav aorarticle > h2when the document relationship is part of the design. - Use existing attributes or states when appropriate. Select a functional attribute such as
type="email", or a state such as:checked, rather than inventing markup for styling alone. - Reconsider the constraint when selectors become brittle. If a repeated visual variant has no semantic or functional distinction, use a clear class hook instead of depending on incidental structure.
For selector fundamentals, see MDN’s Basic CSS selectors and its explanation of handling conflicts and specificity.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
