# CSS Selectors Explained

## Why Do We Need CSS Selectors?

Imagine you have a webpage with:

* headings
    
* paragraphs
    
* buttons
    
* cards
    
* links
    

CSS needs a way to answer one simple question:

> **Which element should I style?**

That’s exactly what **CSS selectors** do.

**Selectors are used to choose HTML elements** so CSS can apply styles to them.

Without selectors, CSS wouldn’t know **where** to apply styles.

## CSS Selectors = Ways to Choose Elements

Think of CSS selectors like **addressing people**.

* “All students” → element selector
    
* “Students wearing red shirts” → class selector
    
* “That one student with roll no. 12” → ID selector
    

CSS works the same way.

## Element Selector

The **element selector** selects HTML elements by their tag name.

### Example

**HTML**

```html
<p>This is a paragraph</p>
<p>This is another paragraph</p>
```

**CSS**

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

### Result

All `<p>` elements become blue.

Use element selectors when:

* You want to style **all elements of the same type**
    

## Class Selector

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

### Syntax

```css
.class-name
```

### Example

**HTML**

```html
<p class="highlight">Important text</p>
<p>Normal text</p>
```

**CSS**

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

### Result

Only the paragraph with class `highlight` is red.

Use class selectors when:

* You want to style **multiple specific elements**
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769783233772/542f8de2-ef4e-4612-87d1-2765662f2db3.png align="center")

## ID Selector

The **ID selector** targets a single unique element.

### Syntax

```css
#id-name
```

### Example

**HTML**

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

**CSS**

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

### Result

Only that one heading is styled.

Rules:

* IDs must be **unique**
    
* Use IDs sparingly
    

## Group Selectors

Group selectors let you apply the **same style to multiple selectors**.

### Example

**CSS**

```css
h1, h2, p {
  font-family: Arial;
}
```

### Result

`h1`, `h2`, and `p` all use Arial.

Use group selectors to:

* Avoid repeating CSS
    
* Keep styles clean
    

## Descendant Selectors

Descendant selectors target elements **inside other elements**.

### Syntax

```css
parent child
```

### Example

**HTML**

```html
<div class="card">
  <p>This text is inside card</p>
</div>

<p>This text is outside card</p>
```

**CSS**

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

### Result

Only the paragraph inside `.card` turns blue.

This is very useful for layouts and components.

## Basic Selector Priority (High-Level Only)

Sometimes multiple selectors target the same element.

CSS follows a simple priority rule:

```text
ID selector > Class selector > Element selector
```

### Example

```css
p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}
```

If an element has all three:

```html
<p id="special" class="text">Hello</p>
```

**Red wins** because ID has higher priority.

Don’t worry about memorizing this now.  
Just remember: **ID is stronger than class, class is stronger than element**.

CSS works like this:

1. Read selector
    
2. Find matching elements
    
3. Apply styles
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769783430228/c7d1a361-483e-4a6d-b908-ff495c5ce600.png align="center")

## Why CSS Selectors Are So Important

Selectors are the **foundation of CSS**.

If you understand selectors:

* Styling becomes easy
    
* Layouts make sense
    
* Debugging becomes faster
    

Everything in CSS starts with:

> **Which element am I targeting?**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769783524124/418365a3-d86b-4c58-a3d2-fae1a030dee5.png align="center")

---

### **Want More…?**

I write articles on [**blog.prakashtsx.com**](https://blog.prakashtsx.me/) and also post development-related content on the following platforms:

* [**Twitter/X**](https://x.com/prakashtsx)
    
* [**LinkedIn**](https://www.linkedin.com/in/prakashtsx)