# CSS Selectors 101: Targeting Elements with Precision

In the previous article we learned about [what HTML is and how tags and elements](https://codeandcuriosity.hashnode.dev/understanding-html-tags-and-elements) structure a webpage. Now we have the main question as now we have the skeleton but no one looks at the skeleton until and unless it has a skin which gives it attraction and forces everyone to see at it. That the same thing what CSS does it gives style to a raw HTML.

But, “How do we style specific parts of that HTML?”

That were CSS selectors come in and help us. In this blog we will learn everything about CSS selectors and how does CSS selectors help in designing a strong and attractive webpage.

## Why do we need CSS Selectors?

Now Imagine a webpage with multiple paragraphs, several buttons and many sections and divs. Now its just the raw html with no styling.

If we write CSS like this:

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

Now every paragraph becomes blue.  
But what id i only want:

* only one paragraph to be red?
    
* only buttons in the header to be bigger?
    

We need a way to choose elements.

That choosing mechanism is called a CSS selector.

## Selectors

For now think of a webpage a a city:

* Element selector → calling everyone with the same job
    
* Class selector → calling a group with label
    
* ID selector → calling one specific person
    

CSS selectors are simply ways to point at HTML elements

### Element Selector

The element selector targets all elements of a given type.

**HTML:**

```xml
<p>Hello</p>
<p>Welcome</p>
```

**CSS:**

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

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769946985775/eb6790c0-91b3-413a-872e-db39d5bfe311.png align="center")

All &lt;p&gt; elements turn blue.

**Use element selectors when we want consistent styling.**

### Class selectors

A class selector targets elements with a specific class attribute

Class selectors start with a . (dot)

**HTML:**

```xml
<p class="highlight">Important</p>
<p>Normal</p>
```

**CSS:**

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

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769947184499/1a9542f2-5d17-4d04-9a8d-1fdf48ad9b29.png align="center")

Only the paragraph with class highlight turns red.

Classes are:

* reusable
    
* flexible
    
* the most commonly used selector in real projects
    

### ID Selector

An ID selector targets a single, unique element

ID selectors start with a #.

**HTML:**

```xml
<h1 id="main-title">My Website</h1>
<p class="highlight">This is a paragraph</p>
<p>This is another paragraph</p>
```

**CSS:**

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

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769947456951/eb79cb74-41b7-45dc-bf8d-925254b4f1f9.png align="center")

Rules for IDs:

* Must be unique
    
* used for one specific element
    

We can think of ID as a person’s Aadhaar/Passport number, only one exists.

### Class vs ID

| **Feature** | **Class** | **ID** |
| --- | --- | --- |
| **Symbol** | . | # |
| **Reusable** | Yess | No |
| **Elements** | Many | One |
| **Common Usage** | Styling | Layout |

### Group Selectors

Sometimes if we want to apply the same style to multiple selectors, then we use group selectors.

**HTML:**

```xml
<h1 id="main-title">My Website</h1>
<p class="highlight">This is a paragraph</p>
<h2>This is another paragraph</h2>
```

**CSS:**

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

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769947834298/44fb0b9a-ff24-4567-b2c8-33c12d7fa1d2.png align="center")

This applies the style to all h1, h2 and p

Group selectors reduce repetition.

### Descendant Selectors

A descendant selector targets elements inside other elements.

**HTML:**

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

**CSS:**

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

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769948115374/fd45740f-3f1a-4d90-9300-6634711e99af.png align="center")

Only the paragraph inside the .card turns green.

We can read it as, “Select all the p elements inside the .card”

## **CSS Specificity**

Sometimes multiple selectors target the same element. Now which one wins?

Priority (Low → High)

1. Element selector → Lowest priority
    
2. Class selector
    
3. ID selector → Highest priority
    

**Example:**

```css
p { color: blue; }       // Lowest priority
.highlight { color: red; }
#main { color: green; }  // Highest priority
```

The ID selectors wins since it has higher priority.

This priority system is call as CSS specificity.

CSS specificity decides which CSS rule is applied when multipme rule target the same element.  
Think of it as a power ranking system. Not all selectors are equal.

### Specificity Order

From weakest to strongest:

1. Element Selectors (p, div)
    
2. Class selectors (.card, .highlight)
    
3. ID selectors (#header, #main)
    

### **Example 1: Element vs Class**

**HTML:**

```xml
<p class="text">Hello</p>
<p>World</p>
```

**CSS:**

```css
    p {
        color: blue;
    }

    .text {
        color: red;
    }
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769948786242/aabb42d7-2ed8-4460-aba7-ba75acdfc51f.png align="center")

Red color is displayed on the Class text selector while other remains blue.

Reason: Class selector beats element selector.

### **Example 2: Class vs ID**

**HTML:**

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

**CSS:**

```css
    p {
        color: blue;
    }

    .text {
        color: red;
    }

    #special {
        color: green;
    }
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769949073995/ddb6bed3-2a3c-49db-9c3b-af7b2c65b172.png align="center")

Green color is displayed since ID selector beats class selector.

### **Example 3: Multiple classes**

**HTML:**

```xml
<p class="text highlight">Hello</p>
```

**CSS:**

```css
    .text {
        color: blue;
    }

    .highlight {
        color: orange;
    }
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769949204081/ed41a7db-e8e1-462f-a0fa-302459ebd93c.png align="center")

Here orange color is displayed because both have same specificity hence last one wins and here last one is Orange.

### **Example 4: Descendant + Class**

**HTML:**

```xml
<div class="card">
    <p class="text">Hello</p>
</div>
```

**CSS:**

```css
    .text {
        color: blue;
    }

    .card .text {
        color: purple;
    }
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769949422083/828ef543-72be-45f2-a62a-2441a1fd3198.png align="center")

Purple color is displayed since .card .text is more specific

### Rule for specificity

* Prefer classes for styling
    
* Avoid heavy use of IDs in CSS
    
* Keep specificity low and predictable
    

**Before CSS**

Plain Text, no color just skeleton

**After CSS**

Selectors decide:

* what turns yellow
    
* what stays normal
    
* what gets special styling
    

This is why selectors are called the foundation of CSS.

## Conclusion

Now we know that HTML creates elements, CSS selectors choose elements and then styles are applied only to selected elements.