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.

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.

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

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

.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.

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

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

#heading {
  background-color: yellow;
}

Rules to remember:

• IDs must be unique

• Mostly used for special cases

Class vs ID

Group Selectors

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

That’s where grouping helps.

Example:

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

Descendant Selectors

Descendant selectors target elements inside other elements.

Example:

div p {
  color: green;
}

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

Basic Selector Priority

ID > Class > Element

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

#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!