Understanding CSS Selectors

When we write CSS, we are trying to style something on the webpage. But css has one big question first, which element should i style ?

That is why CSS selectors exist. Selectors are just a way to choose HTML elements so CSS knows where to apply styles.

Why CSS Selectors are needed

Lets understand why CSS selectors are needed with an example.

Imagine a classroom full of students. Now if the teacher says -

• Everyone stand up → all students respond

• Only students wearing blue shirt stand up → only some student respond

• Whose father mobile number is 100 stand up → then only one person responds

CSS works the same way. Selectors help CSS decide:

• Who gets the style

• Who does not

---

1. Element Selector

This is the most basic selector. You directly use the HTML tag name.

Example:

HTML

<p>Hello World</p>
<p>This is CSS</p>

CSS

p {
  color: blue;
}

What Happpens?

• All <p> elements become blue

• Simple and easy

Use element selctors when you want to style all elements of one type.

---

2. Class Selector

Sometimes you do not want to style all elements. You want to style only some of them. This is where class selector help.

class selector start with a dot(.)

Example

HTML

<p class="highlight">Important text</p>
<p>Normal text</p>
<h1>Hello, I am Kousik</h1>

CSS

.highlight {
  color: red;
}

What happens?

• Only the elements with class highlight becomes red

• other elements stay normal

Classes are great when:

• You want to reuse styles

• Many elements need the same style

---

2. Id Selector

An Id selector is used when something is unique. Only one element should have that Id.

Id selector start with a hash (#)

Example

HTML

<h1 id="title">Welcome</h1>
<h1>Chaicode</h1>

CSS

#title {
  color: green;
}

What happens

• Only element with the id title gets the style

• Same id can not be repeated in same page.

Use IDs for:

• Main titles

• Special sections

• One ime elements

---

3. Group selector

we also can style multiple elements using group selector.

We can group using a comma(,)

Example

HTML

<h1>Welcome</h1>
<h2>Chaicode</h2>
<p>Learn code online</p>

CSS

h1, h2, p {
  color: black;
}

What happens?

• All h1, h2, and p elements become black

• Cleaner and shorter CSS

This saves time and avoids repeated code.

---

4. Descendant selector

Sometimes elements are inside other elements.

A descendant selector elements only when they are inside another element.

Example

HTML

<div class="card">
  <p>Inside card</p>
</div>

<p>Outside card</p>

CSS

.card p {
  color: purple;
}

What happens

• Paragraph inside .card becomes purple

• paragraph outside remain same

5. Basic Selector Priority (Very Simple)

Not all selectors are equal.

Very basic rule to remember:

ID > Class > Element

That means:

• ID styles override class styles

• Class styles override element styles

Before and After Example

Before CSS

<p>Hello</p>
<p class="text">Hi</p>
<p id="special">Hey</p>

All text looks the same.

After CSS

p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}

Now:

• Normal paragraph → black

• Class text → blue

• ID special → red

CSS selectors are the base of everything in CSS.