# CSS Selectors 101: Targeting Elements with Precision

## Introduction

When I first started learning CSS, I thought CSS was just about colors, fonts, and layouts.  
But very quickly I got stuck on one simple question.

**How does CSS know which element to style?**

That’s where **CSS selectors** come in.

In this blog, I’ll explain CSS selectors in a very beginner-friendly way , the way I wish someone had explained it to me.

### Why CSS selectors are needed ?

HTML is just structure.  
CSS is styling.

But a web page doesn’t have just one element. It has **hundreds** of tags: headings, paragraphs, buttons, images, divs, etc.

So CSS needs a way to say things like:

* “Change the color of **this** paragraph”
    
* “Style **all** buttons”
    
* “Only target this one specific element”
    

That “way” is called a **CSS selector**.

**Selectors tell CSS selectors tell what to style.**

Without selectors, CSS would have no idea where to apply styles.

## Element Selector

This is the **most basic selector** and usually the first one everyone learns.

You directly select an HTML tag.

### Example:

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

### What’s happening here?

* p is the **element selector**
    
* It targets **all** <p> tags on the page
    
* Every paragraph becomes blue
    

### HTML:

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

Both paragraphs turn blue.

**Use case:**  
When you want to style all elements of the each type.

## Class Selector

Now things start getting more practical.

Sometimes you don’t want to style **all** paragraphs , only some of them you want select and apply CSS.

That’s where **class selectors** come in.

### How class selector works

* Class names are written in HTML
    
* In CSS, class selectors start with a . (dot)
    

### HTML:

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

### CSS:

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

### Result:

* Only the paragraph with class=”highlight” gets styled
    
* The other one stays normal
    

**Important things to remember:**

* Multiple elements can share the same class
    
* Classes are reusable (very important!)
    

**This is the selector you’ll use the most in real projects.**

## ID Selector

ID selectors are used when you want to target **one unique element only**.

### How ID selector works

* IDs are written in HTML
    
* In CSS, ID selectors start with #
    

### HTML:

```plaintext
<h1 id="main-title">Welcome to My Blog</h1>
```

### CSS:

```plaintext
#main-title {
  color: red;
}
```

### Result:

* Only that one &lt;h1&gt; turns red
    

**Rules of ID selectors:**

* IDs must be **unique**
    
* One ID = one element
    
* Don’t reuse the same ID
    

IDs are powerful but **should be used carefully**.

## Group Selector

Sometimes you want to apply the **same styles to multiple selectors**.

Instead of writing CSS again and again, you can **group selectors**.

### Example:

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

### What this does:

* Targets all &lt;h1&gt;, &lt;h2&gt; , and &lt;p&gt; elements
    
* Applies the same font to all of them
    

**Why this is useful:**

* Less code
    
* Cleaner CSS
    
* Easier to maintain
    

## Descendant Selector

This selector is used when you want to target an element **inside another element**.

### Example:

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

### What does this mean?

* Select all &lt;p&gt; elements
    
* But **only those that are inside a** &lt;div&gt;
    

### HTML:

```plaintext
<div>
  <p>This will be green</p>
</div>

<p>This will NOT be green</p>
```

Space between selectors means **“inside”**.

This selector is very common when working with layouts and components.

## Basic Selector Priority

Now here’s something that confused me a lot in the beginning.

**What if multiple selectors target the same element?**

CSS has a rule system called **priority**

At a very high level, remember this order:

```plaintext
ID selector > Class selector > Element selector
```

### Example:

```plaintext
p {
  color: blue;
}

.highlight {
  color: green;
}

#special {
  color: red;
}
```

### HTML:

```plaintext
<p id="special" class="highlight">Hello</p>
```

### Final color?

**Red**

Because:

* ID selector has the highest priority
    
* Even though class and element are also applied, ID wins
    
* **Rule to remember:**  
    More specific selector = higher priority.
    

**Blog ends here hope you understand the how the CSS selectors work.**