CSS Selectors

If you’re ready to target specific parts of your webpage and style them beautifully, CSS Selectors are your best friend!

In this section of the tutorial, we’ll take you through CSS Selectors — starting from the absolute basics like selecting elements by tag, class, or ID, to more advanced ways like attribute selectors, pseudo-classes, and pseudo-elements — explained in a clear, simple, and beginner-friendly way.

A CSS selector is a part of CSS that tells the browser which HTML element(s) you want to apply a style to.

Why is it called a “selector”?

Because it selects elements from the web page.
It acts like a filter or a pointer that helps CSS find the right elements on the page.

A web page has many HTML tags: paragraphs, headings, buttons, divs, etc.
You don’t want to style everything the same way.
So, you need to tell CSS:
“Hey, select this part of the HTML and apply these styles to it.”

That’s what a selector does — it helps identify the target.

Types of CSS Selector

Basic Selector

Basic selectors are the most common and simple selectors in CSS. They are used to select HTML elements directly by their name, class, or ID — without needing any advanced conditions or relationships.

Basic Selectors are:

Universal Selector (`*`)

It selects all elements on the page.

You are saying, “Hey CSS, apply this style to everything, no matter what it is.”

Used when you want to reset or apply the same rule to every element.

It is often used for global styles like resetting margins or paddings for all elements.

*
{
    margin: 0;
    padding: 0;
}

In this example, all elements on the page will have their margins and paddings set to 0

Type Selector (Element Selector)

It selects all elements of a specific type or tag in HTML.

A type selector targets HTML elements by their tag names, such as div , p , h1 , etc. It applies styles to all instances of that element.
Any HTML element by its name — like p, div, h1, span, button, etc.
Used when you want to style all elements of the same kind in the same way.

Example

p {
  color: red;
}

This will make the text color of all <p> tags red.

Class Selector (`.classname`)

The class selector is used to select HTML elements that have a specific class name. Denoted by dot(.) in CSS

Apply this style to everything that has this class name.

It’s like putting a label on some HTML elements, and then using CSS to style everything with that label.

In your HTML, you add a class="something" to the elements you want to style.

Then in CSS, you write:

.className{

/* CSS Styles */

}

Notice the dot (.) before the class name — that’s what makes it a class selector.

Example:

.intro{
        font-size: 16px;
 }

This rule applies to all elements with the class intro , setting their font size to 16px.

ID Selector (`#idname`)

The ID selector is used to select one specific HTML element that has a unique id. Denoted by hash(#) in CSS.

Apply this style to that one special element that has this specific ID.

It is like giving a name tag to one element and saying, “Only you get this style, no one else.”

In your HTML, you give an element an id="something"
In your CSS, you write:

#idName{
  /* CSS Style*/
}

Notice the hash sign # before the ID name — that tells CSS this is an ID selector.

#header{
      background-color: yellow;
}

This will apply a yellow background to the element with the ID header.

Grouping Selector (like `h1, p, div`)

A Grouping Selector lets you apply the same CSS style to multiple different elements all at once.

I want to style many different elements in the same way — don’t make me write the rule again and again.

You list the element names (or classes or IDs), separated by commas ,

Example:

h1, p, div {

color: green;

}

This means:

All <h1> tags
All <p> tags
All <div> tags
will have green text.

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel