Basic Selectors

Difficulty: Beginner

CSS selectors are patterns used to target HTML elements for styling. They are the 'addressing system' of CSS - they tell the browser which elements a set of style declarations should apply to. Mastering selectors is fundamental to writing efficient and maintainable CSS, because the selector determines both what gets styled and how specific (and therefore how hard to override) that styling is.

The element (type) selector targets all elements of a given HTML tag name. Writing p { color: gray; } styles every <p> element on the page. The class selector, prefixed with a dot (.), targets elements that have a specific class attribute. Writing .error { color: red; } styles every element with class="error". The ID selector, prefixed with a hash (#), targets the single element with a matching id attribute. Writing #logo { width: 200px; } styles the element with id="logo". An element can have multiple classes (class="btn btn-primary large") but should have at most one unique id.

The universal selector (*) matches every element on the page. It is commonly used in CSS resets (* { margin: 0; padding: 0; box-sizing: border-box; }) to normalize default browser styles. While powerful, the universal selector should be used sparingly because it matches everything, which can have performance implications on very large pages and may produce unexpected results.

Grouping selectors allow you to apply the same styles to multiple selectors without repeating the declaration block. Instead of writing separate rules for h1, h2, and h3, you can combine them: h1, h2, h3 { font-family: Georgia, serif; }. The selectors are separated by commas. Each selector in the group is independent - h1, .title, #hero-text { color: blue; } will match all h1 elements, all elements with class 'title', and the element with id 'hero-text'.

Attribute selectors target elements based on their attributes or attribute values. The simplest form [href] matches any element with an href attribute. You can match exact values with [type="email"], partial matches with [class*="btn"] (contains 'btn'), prefix matches with [href^="https"] (starts with 'https'), and suffix matches with [src$=".png"] (ends with '.png'). Attribute selectors are powerful for styling form inputs by type, links by protocol, and more.

Code examples

Element, Class, and ID Selectors

/* Element selector: targets ALL <p> elements */
p {
  font-size: 16px;
  line-height: 1.6;
}

/* Class selector: targets elements with class="highlight" */
.highlight {
  background-color: #fef3c7;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ID selector: targets the ONE element with id="nav" */
#nav {
  background-color: #1e293b;
  padding: 12px 24px;
}

/* Multiple classes on one element */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #2563eb;
  color: white;
}

.btn-danger {
  background-color: #dc2626;
  color: white;
}

Element selectors match all instances of a tag. Class selectors (dot prefix) match elements with that class - one element can have multiple classes. ID selectors (hash prefix) match a single unique element.

Universal and Grouping Selectors

/* Universal selector: matches EVERY element */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Grouping: same styles for multiple selectors */
h1,
h2,
h3,
h4 {
  font-family: Georgia, serif;
  color: #1f2937;
  margin-bottom: 12px;
}

/* Mix different selector types in a group */
.subtitle,
.caption,
small {
  font-size: 14px;
  color: #6b7280;
}

/* Without grouping, you would need to repeat: */
/*
h1 { font-family: Georgia, serif; color: #1f2937; margin-bottom: 12px; }
h2 { font-family: Georgia, serif; color: #1f2937; margin-bottom: 12px; }
h3 { font-family: Georgia, serif; color: #1f2937; margin-bottom: 12px; }
*/

The universal selector (*) targets everything and is useful for CSS resets. Grouping selectors with commas lets you apply the same styles to multiple selectors, keeping your CSS DRY (Don't Repeat Yourself).

Attribute Selectors

/* Has attribute */
[title] {
  cursor: help;
  border-bottom: 1px dotted #999;
}

/* Exact value match */
input[type="email"] {
  border: 2px solid #3b82f6;
}

input[type="password"] {
  border: 2px solid #8b5cf6;
}

/* Starts with (^=) */
a[href^="https"] {
  color: green;
}

/* Ends with ($=) */
a[href$=".pdf"] {
  color: #dc2626;
}

/* Contains (*=) */
[class*="col-"] {
  float: left;
  padding: 0 15px;
}

Attribute selectors match elements based on their attributes. [attr] checks presence, [attr="val"] matches exact value, [attr^="val"] matches prefix, [attr$="val"] matches suffix, and [attr*="val"] matches substring.

Key points

Prefer class selectors over ID selectors for styling. IDs have very high specificity and are harder to override. Reserve IDs for JavaScript targeting and fragment links.
Element selectors have the lowest specificity. They are good for base styles but are easily overridden by class or ID selectors.
The universal selector (*) has zero specificity - it does not add any weight to specificity calculations.
An element can have multiple classes separated by spaces: class="btn btn-large btn-primary". Each class can be targeted independently.

Concepts covered

Element Selector, Class Selector, ID Selector, Universal Selector, Grouping Selectors, Attribute Selectors