# CSS Selectors Explained: How to Choose the Right Elements
When you write CSS, you're constantly answering one question: **"Which elements do I want to style?"**
Without a way to **point at** specific elements in your HTML, you couldn't change colors, fonts, or layout. CSS **selectors** are exactly that: they're the way you **choose** which elements get which styles.
In this article w, we'll cover:
**Why are CSS selectors needed**
**Element selector** – style by tag name
**Class selector** – style by class name
**ID selector** – style by ID
**Group selectors** – style multiple things at once
**Descendant selectors** – style elements inside other elements
**Basic selector priority** – why some rules win over others
We'll use a simple "addressing people" analogy, start from the basics, and show before/after examples so you can see selectors in action.
## **Why CSS Selectors Are Needed**
### **The basic problem**
Your HTML page has many elements: headings, paragraphs, buttons, links, lists, and more. Your CSS needs to say:
"Make **all paragraphs** blue."
"Make **this button** red."
"Make **everything inside the sidebar** smaller."
If you had no way to **target** specific elements, you'd have to style everything the same – or not style at all.
**Selectors** are the mechanism that lets you say: *"Apply these styles to* **\*these\*\*** *elements."\**
### **Real-world analogy: Addressing people**
Imagine a room full of people:
**"Everyone named John"** → You're selecting by **name** (like an **element selector**).
**"Everyone wearing a red shirt"** → You're selecting by **what they're wearing** (like a **class selector**).
**"The person with badge #42"** → You're selecting by **unique ID** (like an **ID selector**).
**"Everyone named John who is inside the left corner"** → You're selecting by **name + location** (like a **descendant selector**).
CSS selectors work the same way: they're different **ways of addressing** elements so the browser knows *who* gets *which* style.
### **Selectors are the foundation of CSS**
Every CSS rule has two parts:
1\. **Selector** – *which* elements
2\. **Declaration block** – *what* styles to apply
```css
selector {
property: value;
}
```
If you don't understand selectors, you can't control *where* your styles go. So think of selectors as the **foundation** of CSS: everything else (colors, layout, animations) builds on top of "which element?"
## **Element Selector – Style by Tag Name**
### **What it does**
The **element selector** (also called **type selector**) selects **every element** that matches a given **HTML tag name**.
You write it as the tag name itself, with **no** extra symbol (no `.` or `#`).
### **Syntax**
```css
elementname {
/* styles */
}
```
### **Examples**
**Select all paragraphs:**
```css
p {
color: blue;
font-size: 16px;
}
```
**Select all headings of level 1:**
```css
h1 {
color: darkgreen;
font-size: 2rem;
}
```
**Select all links:**
```css
a {
color: purple;
text-decoration: underline;
}
```
### **Before / After**
**Before (no CSS):**
All elements use the browser’s default styles (black text, default font, etc.).
**After (with element selectors):**
```css
p { color: blue; }
h1 { color: darkgreen; }
a { color: purple; }
```
Now *every* `