# CSS Selectors 101: Targeting Elements with Precision

---

**Why CSS Selectors Matter**  
You have HTML structure. Now you want to style it.  
But how do you tell CSS *which* elements to style?

**That's where selectors come in.**  
Selectors are how you target specific elements.  
Think of it like addressing people:

* "Everyone" (all elements)
    
* "People wearing blue shirts" (class)
    
* "The person named John" (ID)
    

CSS selectors work the same way.

**Element Selector: Styling All of a Type**  
Target all elements of the same type.

**Syntax:** Just use the tag name

```css
p {
  color: blue;
}
```

This styles **every** `<p>` tag on the page.

**Example:**  
HTML:

```html
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
```

CSS:

```css
p {
  color: blue;
  font-size: 16px;
}
```

**Result:** All paragraphs are blue, 16px font.

**Common element selectors:**

```css
h1 { color: red; }
div { padding: 20px; }
a { text-decoration: none; }
img { width: 100%; }
```

**Use when:** You want to style all instances of an element type.

**Class Selector: Reusable Styles**  
Classes let you style specific groups of elements.

**Syntax:** Use a dot (`.`) before the class name

```css
.button {
  background: blue;
  color: white;
}
```

**HTML:**

```html
<button class="button">Click me</button>
<a class="button">I'm styled too</a>
```

Both get the same styling because they share the class.

**Multiple classes:**  
HTML:

```html
<div class="card featured">Content</div>
```

CSS:

```css
.card {
  border: 1px solid gray;
  padding: 20px;
}

.featured {
  background: yellow;
}
```

The div gets styles from **both** classes.

**Use when:** You want reusable styles across multiple elements.

**ID Selector: One Unique Element**  
IDs target a single, unique element.

**Syntax:** Use a hash (`#`) before the ID name

```css
#header {
  background: black;
  color: white;
}
```

**HTML:**

```html
<header id="header">My Website</header>
```

**Important rule:** Each ID should be used **only once** per page.

**Example:**

```css
#main-nav { ... }
#hero-section { ... }
#contact-form { ... }
```

**Use when:** Styling a unique, one-time element (header, footer, specific section).

**Class vs ID: When to Use What**

```html
<!-- ID: Unique -->
<div id="header">...</div>

<!-- Class: Reusable -->
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
```

**Rule of thumb:**

* **Classes:** Use 95% of the time (reusable)
    
* **IDs:** Use for unique page landmarks
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769794920164/d01825d6-6c82-4ecb-879a-5e2f401a4473.png align="center")

**Group Selectors: Style Multiple Elements at Once**  
Apply same styles to multiple selectors.

**Syntax:** Separate with commas

```css
h1, h2, h3 {
  color: navy;
  font-family: Arial;
}
```

**Same as:**

```css
h1 { color: navy; font-family: Arial; }
h2 { color: navy; font-family: Arial; }
h3 { color: navy; font-family: Arial; }
```

But cleaner and DRY (Don't Repeat Yourself).

**Another example:**

```css
.button, .link, .cta {
  text-decoration: none;
  padding: 10px;
}
```

**Use when:** Multiple elements need identical styles.

**Descendant Selectors: Targeting Nested Elements**  
Style elements inside other elements.

**Syntax:** Use a space between selectors

```css
div p {
  color: gray;
}
```

This targets all `<p>` tags **inside** `<div>` tags.

**Example:**  
HTML:

```html
<div>
  <p>This will be gray</p>
</div>

<p>This won't be affected</p>
```

CSS:

```css
div p {
  color: gray;
}
```

Only the `<p>` inside `<div>` gets styled.

**More specific targeting:**

```css
.card h2 {
  font-size: 24px;
}

#header nav a {
  color: white;
}
```

**Use when:** You want to style elements only in specific contexts.

**Selector Priority (Specificity)**  
What happens when multiple selectors target the same element?  
CSS has a priority system:

**Priority order (low to high):**

1. Element selector (`p`)
    
2. Class selector (`.text`)
    
3. ID selector (`#main`)
    
4. Inline styles (`style="color: red"`)
    

**Example:**  
HTML:

```html
<p class="intro" id="first">Text</p>
```

CSS:

```css
p { color: blue; }          /* Priority: 1 */
.intro { color: green; }    /* Priority: 2 */
#first { color: red; }      /* Priority: 3 */
```

**Result:** Text is **red** (ID has highest priority).

**Simple rule:** More specific = higher priority.

**Quick Selector Reference**

| Selector | Syntax | Targets |
| --- | --- | --- |
| Element | `p` | All `<p>` tags |
| Class | `.button` | All elements with `class="button"` |
| ID | `#header` | Element with `id="header"` |
| Group | `h1, h2, h3` | All h1, h2, and h3 tags |
| Descendant | `div p` | All `<p>` inside `<div>` |

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769795024581/9c90682d-5719-45ac-a193-3b29b6216bc0.png align="center")

**Practice Example**  
HTML:

```html
<div class="container">
  <h1 id="title">Welcome</h1>
  <p class="intro">Introduction text</p>
  <p>Regular paragraph</p>
</div>
```

CSS:

```css
/* Style all paragraphs */
p {
  line-height: 1.6;
}

/* Style intro paragraph */
.intro {
  font-size: 18px;
  color: gray;
}

/* Style the title */
#title {
  color: navy;
  font-size: 36px;
}

/* Style paragraphs inside container */
.container p {
  margin: 10px 0;
}
```

**You Now Understand CSS Selectors**

`Element selectors: target all of a type   Class selectors: reusable styles   ID selectors: unique elements   Group selectors: style multiple at once   Descendant selectors: nested targeting   Specificity basics: ID > Class > Element`

**Start Simple**  
Use element and class selectors 90% of the time.  
Add descendant selectors when you need context.  
Use IDs sparingly.

**Practice**  
Open DevTools (F12) on any website.  
Look at the CSS. See how selectors target elements.  
Try changing selectors. Watch what happens.

**Selectors are your foundation.**  
Master these, and you control how everything looks.

---