# Understanding CSS Selectors

When we write CSS, we are trying to style something on the webpage. But css has one big question first, **<mark>which element should i style ?</mark>**

That is why <mark>CSS selectors exist.</mark> Selectors are just a way to choose HTML elements so CSS knows where to apply styles.

## Why CSS Selectors are needed

Lets understand why CSS selectors are needed with an example.

Imagine a classroom full of students. Now if the teacher says -

* Everyone stand up → all students respond
    
* Only students wearing blue shirt stand up → only some student respond
    
* Whose father mobile number is 100 stand up → then only one person responds
    

CSS works the same way. Selectors help CSS decide:

* Who gets the style
    
* Who does not
    

---

1. ## Element Selector
    

This is the most basic selector. You directly use the HTML tag name.

**Example:**

**HTML**

```xml
<p>Hello World</p>
<p>This is CSS</p>
```

**CSS**

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

**What Happpens?**

* All `<p>` elements become blue
    
* Simple and easy
    

<mark>Use element selctors when you want to style all elements of one type.</mark>

---

2. ## Class Selector
    

Sometimes you do not want to style all elements. You want to style only some of them. This is where <mark>class selector</mark> help.

class selector start with a dot(.)

### Example

**HTML**

```css
<p class="highlight">Important text</p>
<p>Normal text</p>
<h1>Hello, I am Kousik</h1>
```

**CSS**

```css
.highlight {
  color: red;
}
```

**What happens?**

* Only the elements with class `highlight` becomes red
    
* other elements stay normal
    

**Classes are great when:**

* You want to reuse styles
    
* Many elements need the same style
    

---

2. ## Id Selector
    

An Id selector is used when something is unique. Only one element should have that Id.

Id selector start with a **hash (#)**

### Example

**HTML**

```xml
<h1 id="title">Welcome</h1>
<h1>Chaicode</h1>
```

**CSS**

```css
#title {
  color: green;
}
```

**What happens**

* Only element with the id `title` gets the style
    
* Same id can not be repeated in same page.
    

**Use IDs for:**

* Main titles
    
* Special sections
    
* One ime elements
    

---

3. ## Group selector
    

we also can style multiple elements using group selector.

We can group using a comma(,)

**Example**

**HTML**

```xml
<h1>Welcome</h1>
<h2>Chaicode</h2>
<p>Learn code online</p>
```

**CSS**

```css
h1, h2, p {
  color: black;
}
```

### What happens?

* All `h1`, `h2`, and `p` elements become black
    
* Cleaner and shorter CSS
    

This saves time and avoids repeated code.

---

4. ## Descendant selector
    

Sometimes elements are inside other elements.

A descendant selector elements only when they are inside another element.

### Example

**HTML**

```xml
<div class="card">
  <p>Inside card</p>
</div>

<p>Outside card</p>
```

**CSS**

```css
.card p {
  color: purple;
}
```

**What happens**

* Paragraph inside `.card` becomes purple
    
* paragraph outside remain same
    

5. ## Basic Selector Priority (Very Simple)
    

Not all selectors are equal.

Very basic rule to remember:

**<mark>ID &gt; Class &gt; Element</mark>**

That means:

* ID styles override class styles
    
* Class styles override element styles
    

## Before and After Example

### Before CSS

```xml
<p>Hello</p>
<p class="text">Hi</p>
<p id="special">Hey</p>
```

All text looks the same.

### After CSS

```css
p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}
```

**Now:**

* Normal paragraph → black
    
* Class text → blue
    
* ID special → red
    

**CSS selectors are the base of everything in CSS.**