Basic Selectors

🎨 CSS3+ 🟢 Chapter 3 of 49 📂 Phase 02: Selectors 📅 2026 Edition

📌 Covered in this chapter: Universal · Element · Class · ID · Grouping · Attribute · Case Sensitivity · Naming · Reusable Classes · Avoid Excessive IDs

Welcome to Chapter 3: Basic Selectors — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1What Are CSS Selectors?

CSS selectors HTML element patterns ni match chesi styles apply chestayi. Correct selector choose cheyadam — maintainable, scalable CSS foundation.

CSS — All Basic Selectors▶ Try in Editor

* { box-sizing: border-box; }

p { color: #333; }

.card { padding: 20px; }

#main-title { font-size: 2rem; }

a[href^="https"] { color: #2563eb; }

h1, h2, h3 { font-family: 'Sora', sans-serif; }

2Universal Selector (*)

* — page lo every element match avuthundi. CSS resets and global box-sizing ki common:

CSS

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

3Element (Type) Selector

Tag name tho match — p, h1, button, div:

CSS

p { color: #333; line-height: 1.7; }
button { cursor: pointer; border: none; }

4Class Selector (.) — Reusable Styles

Class selector most common and reusable. HTML lo class="card", CSS lo .card:

CSS + HTML

.card {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

Naming conventions: kebab-case (.nav-link), BEM (.card__title--active), semantic names (.btn-primary not .blue-box).

5ID Selector (#) — Use Sparingly

ID unique ga undali page lo okate — high specificity valla override cheyadam kashtam:

CSS

#main-title {
  font-size: 2rem;
  color: #1e293b;
}

Best practice: Styling ki classes prefer cheyandi. IDs JavaScript hooks and anchor links ki reserve cheyandi. Excessive IDs avoid cheyandi.

6Grouping & Attribute Selectors

Grouping — same styles multiple selectors ki:

CSS

h1, h2, h3 {
  font-weight: 700;
  color: #0f172a;
}

Attribute selectors:

CSS

input[type="email"] { border-color: #3b82f6; }
a[href^="https"] { font-weight: 600; }
img[alt=""] { outline: 2px dashed red; }

Case sensitivity: HTML class/ID names case-sensitive in quirks mode but standard mode lo case-sensitive. Always consistent casing use cheyandi.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026