CSS selectors are patterns used to select HTML elements.

Instead of styling every element individually, selectors allow you to apply styles efficiently.

Example

p{

    color:blue;

}

The selector p selects every paragraph on the page.

The Element Selector selects all HTML elements of the same type.

Syntax

h1{

    color:red;

}

HTML Example

Welcome

CSS Tutorial

Output

• Both headings become red.

The ID Selector selects one unique HTML element.

HTML

Welcome to CSS

CSS

#title{

    color:green;

    text-align:center;

}

The Class Selector styles multiple HTML elements having the same class name.

HTML

First Paragraph

Second Paragraph

CSS

.note{

    color:blue;

    font-weight:bold;

}

The Universal Selector selects every HTML element on the page.

Example

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

Uses

• Reset browser default spacing.
• Apply common styles to all elements.
• Create consistent layouts.

The Grouping Selector is used to apply the same CSS style to multiple HTML elements at the same time.

Syntax

h1, h2, p{

    color:blue;

}

Output

• All <h1> elements become blue.
• All <h2> elements become blue.
• All <p> elements become blue.

The Descendant Selector selects elements that are inside another element, regardless of how deeply they are nested.

HTML

    
Paragraph One



Paragraph Two

CSS

div p{

    color:red;

}

Output

• Paragraph inside the div becomes red.
• The outside paragraph remains unchanged.

The Child Selector selects only the direct children of an element.

HTML

    
Direct Child

    


        
Nested Paragraph

    

CSS

div > p{

    color:green;

}

Output

• The first paragraph becomes green.
• The nested paragraph is not selected.

The Adjacent Sibling Selector selects the first element immediately following another element.

HTML

Heading

Paragraph One

Paragraph Two

CSS

h2 + p{

    color:purple;

}

Output

• Only the first paragraph becomes purple.
• The second paragraph remains unchanged.

The General Sibling Selector selects all sibling elements that come after a specified element.

HTML

Heading

Paragraph One

Paragraph Two

Paragraph Three

CSS

h2 ~ p{

    color:orange;

}

Output

• All paragraphs after the heading become orange.

The Attribute Selector selects HTML elements based on their attributes.

Example

input[type="text"]{

    border:2px solid blue;

}

HTML

Output

• The text box gets a blue border.
• The password box remains unchanged.

• Use meaningful class names.
• Avoid unnecessary long selectors.
• Prefer class selectors over ID selectors for reusable styles.
• Use ID selectors only for unique elements.
• Keep your CSS simple and organized.
• Group similar selectors together.
• Use external CSS for large projects.
• Avoid duplicate CSS rules.
• Write readable and properly indented code.
• Test selectors in different browsers.

❌ Wrong

.note p div{

    color:red;

}

✔ Better

.note{

    color:red;

}

1. What is a CSS selector?
2. What is the difference between ID and Class selectors?
3. Which symbol is used for a Class selector?
4. Which symbol is used for an ID selector?
5. What is the Universal Selector?
6. What is a Grouping Selector?
7. What is the Descendant Selector?
8. What is the Child Selector?
9. What is the Adjacent Sibling Selector?
10. What is the General Sibling Selector?
11. What is an Attribute Selector?
12. When should you use Class selectors?
13. When should you use ID selectors?
14. Why are selectors important in CSS?
15. Which selector is best for reusable styles?

In this lesson, you learned:

• ✔ What CSS Selectors are.
• ✔ Element Selector.
• ✔ ID Selector.
• ✔ Class Selector.
• ✔ Universal Selector.
• ✔ Grouping Selector.
• ✔ Descendant Selector.
• ✔ Child Selector.
• ✔ Adjacent Sibling Selector.
• ✔ General Sibling Selector.
• ✔ Attribute Selector.