CSS Selectors

Beginner ⏱ 6 min read Updated: Jul 2026

CSS selectors are used to select HTML elements
They tell the browser which elements to style
Selectors are the foundation of CSS styling
They can target single or multiple elements
They help apply styles in a structured way

What are CSS Selectors?

CSS selectors are patterns used to select and style HTML elements on a web page. In simple words, selectors tell the browser: “Which element do you want to style?” Without selectors, CSS cannot apply any design to HTML elements. They are one of the most important parts of CSS because every styling rule starts with a selector.

For example, if you want to change the color of all headings on a page, you will use the h1 selector. If you want to style a specific class or ID, you will use class selectors or ID selectors.

Basic CSS Selector Example

Example


p {
    color: blue;
}

In the above example, p is the selector. It selects all paragraph elements in HTML and applies blue color to them.

Types of CSS Selectors

Element Selector

Selects HTML elements by tag name like p, h1, div.

Class Selector

Uses dot (.) to select elements with a class name like .box.

ID Selector

Uses hash (#) to select a unique element like #header.

Universal Selector

Uses * to select all elements on the page.

Group Selector

Selects multiple elements at once like h1, p, a.

Class Selector Example

Example


.box {
    background-color: yellow;
    padding: 10px;
}

This selector targets all elements with class name box. Class selectors are very useful because they can be reused multiple times in a web page.

ID Selector Example

Example


#header {
    color: red;
    text-align: center;
}

The ID selector is used to style a single unique element. Unlike class selectors, IDs should not be reused for multiple elements.

Why CSS Selectors are Important?

💡 Simple Answer: CSS selectors are important because they allow you to control exactly which elements should be styled. Without selectors, it would not be possible to design modern web pages.

Selectors also help in making code clean and organized. Instead of writing inline styles in every HTML tag, you can use selectors and apply styles in one place. This makes the website easier to maintain.

Real Life Example

Think of CSS selectors like targeting people in a classroom. If “all students” is a selector, then the rule applies to everyone. If “students with blue uniform” is a class selector, it applies only to those students. If “roll number 5 student” is an ID selector, it targets only one specific person.

Conclusion

CSS selectors are the foundation of styling in web development. They help developers choose HTML elements and apply styles efficiently. Once you understand selectors properly, learning advanced CSS becomes much easier.

← Previous CSS Syntax Next → How to add css