# CSS Selectors 101: Targeting Elements with Precision

Hey everyone 👋

In the previous blog, I talked about HTML. If you haven’t checked it out yet, give it a read for a better understanding. As we know, HTML gives structure to a webpage, but **CSS controls how that structure looks**.

The big question is:

> How does CSS know *which* element to style?
> 
> Answer: CSS Selectors

In this blog, we will go through CSS selectors.

### Why CSS Selectors Are Needed?

Imagine a webpage with:

* Multiple headings
    
* Several links
    
* Many divs and spans
    

CSS needs a way to access them:

* Style **this** heading
    
* Change the color of **those** buttons.
    
* Apply margin to **only this div.**
    

Selectors are the way CSS accesses them.

---

### Element Selector

It targets all elements of a given type.

```css
p{
    background-color: black;
    color:red;   
}
```

This styles **all** `<p>` elements on the page.

## Class Selector

It targets the elements with the same class name

We use the `class` keyword with the element in order give a class to the element.

```xml
<h1 class="heading">This is heading</h1>
```

To access the element from CSS, we use ‘.\[dot\]‘

```css
.heading {
  background-color: yellow;
}
```

Classes are:

* Reusable
    
* Flexible
    
* Most commonly used
    

One class can be applied to **multiple elements**.

### ID Selector

It targets the elements with the same Id name

We use the `id` keyword with the element in order give a id to the element.

```xml
<h1 id="heading">This is heading</h1>
```

To access the element from CSS, we use ‘#‘

```css
#heading {
  background-color: yellow;
}
```

Rules to remember:

* IDs must be **unique**
    
* Mostly used for special cases
    

## Class vs ID

| Feature | Class | ID |
| --- | --- | --- |
| Reusable | ✅ | ❌ |
| Syntax | `.class` | `#id` |
| Usage | Styling groups | Styling one unique element |

## Group Selectors

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

That’s where grouping helps.

### Example:

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

## Descendant Selectors

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

### Example:

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

The CSS will be implied on p element inside the div.

### Basic Selector Priority

```powershell
ID > Class > Element
```

```xml
<p id="paragraph" class="para">I am the best</p>
```

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

p{
    color:black;
}

.para{
    color:red;
}
```

The p tag content will be of color green as Id priority is high compared to others.

You don’t need to memorize every selector.

Just remember

* Element → Broad
    
* Class → Reusable
    
* Id → Unique
    
* Descendent → context-based
    

---

And now, you know how CSS **targets elements with precision**.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!