# CSS Selectors 101: Targeting Elements with Precision

## Why CSS selectors are needed

CSS is not just to add color on text , fonts and layout .

Before apply style we need to confirm on which elements we add style that’s where CSS selector comes .

## Why CSS Selectors Are Needed

A webpage contain many HTML elements:

* headings
    
* paragraphs
    
* buttons
    
* images
    

CSS selector is work like address which tell to browser hey where apply this style , these elements not to others .

Without selector , CSS never be know where i need to apply CSS.

## Think of Selectors Like Addressing People 🏠

* **Element selector** → call *everyone with the same role*
    
* **Class selector** → call *people wearing the same badge*
    
* **ID selector** → call *one specific person by name*
    

CSS work on same way .

## Element Selector

The Element selctor target all elements which has same type.

### Example

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

### What it does

* Targets **all** `<p>` elements
    
* Very broad
    
* Useful for base styling
    

## Class Selector

The **class selector** targets elements with a specific class name.

### Example

```bash
.highlight {
  background-color: yellow;
}
```

```bash
<p class="highlight">Important text</p>
```

### What it does

* Targets **multiple elements**
    
* Reusable
    
* Most commonly used selector
    

---

## ID Selector

The **ID selector** targets **one unique element**.

### Example

```bash
#main-title {
  font-size: 32px;
}
```

```bash
<h1 id="main-title">Welcome</h1>
```

### Rules to remember

* IDs must be **unique**
    
* Used for **one specific element**
    
* not be reused like classes
    

---

## Group Selector

The **group selector** applies the same styles to multiple selectors.

### Example

```bash
h1, h2, p {
  font-family: Arial, sans-serif;
}
```

### What it does

* Reduces repetition
    
* Keeps CSS clean and readable
    

---

## Descendant Selector

The **descendant selector** targets elements **inside other elements**.

### Example

```bash
div p {
  color: green;
}
```

### What it does

* Targets `<p>` elements **inside** `<div>`
    
* Helps style content based on structure
    

---

## Basic Selector Priority (Very High Level)

When multiple selectors target the same element, **priority matters**.

At a basic level:

```bash
Element < Class < ID
```

* Element selector → lowest priority
    
* Class selector → medium priority
    
* ID selector → highest priority
    

This is why IDs override classes, and classes override elements.

---

## Before & After Styling Example

### HTML (Before)

```bash
<p>Hello World</p>
```

### CSS (After)

```bash
p {
  color: red;
}
```

Result: The paragraph text becomes red.

Selectors decide **what gets styled**.