CSS Selector

A CSS selector is the part of a rule before the curly braces that matches elements in the document. It can target elements by tag name, class, ID, attribute, position or relationship to other elements.

Why it matters

Selectors decide which rule wins, and that determines whether your styling works. Specificity and source order resolve conflicts: an ID beats a class, which beats a tag. Overly specific or deeply nested selectors make a stylesheet hard to change and slow down maintenance, while clear class-based selectors scale well.

Example

p { color: #333; }                 /* every paragraph */
.card { padding: 1rem; }           /* class */
#hero { margin: 0; }               /* ID */
nav a:hover { text-decoration: underline; }
a[target="_blank"] { cursor: alias; }

The fourth rule uses a descendant combinator and a pseudo-class; the fifth uses an attribute selector.

Common mistakes

• Reaching for !important instead of understanding specificity.
• Chaining long selectors like div.a ul li span, which break whenever markup changes.
• Styling by ID, which is hard to override and cannot be reused.

Related

• HTML Element
• CSS Box Model
• Media Query
• Critical CSS
• Tool: Developer tools

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.