ID selectors are used to style one unique element on a page.
Each ID should be used only once in a webpage.
What Is an ID Selector
An ID selector targets an element with a specific id attribute.
What Is an ID Selector
An ID selector targets an element with a specific id attribute.
Only the element with id "main-title" is styled.
Difference Between Class and ID
Class:
- Can be used on many elements
- Reusable
ID:
- Used on only one element
- Unique
When to Use ID Selectors
Use ID selectors when:
- Styling a unique section
- Targeting a special element like header or footer
ID Selectors in Real Projects
Developers often use IDs for:
- Page headers
- Main content areas
- Navigation containers
Why ID Selectors Need Care
ID selectors are very powerful.
Using too many IDs makes CSS hard to manage.
Best Practice
Use classes for styling and IDs mainly for:
- Page anchors
- JavaScript targeting
Why This Matters for Jobs
Professional developers know when to use IDs correctly.
Misusing IDs can cause problems in large projects.
Common Beginner Mistakes
- Using the same ID more than once
- Using IDs instead of classes for reusable styles
- Forgetting the # symbol in CSS
Practice Task
Create a page and:
- Add an id to one heading
- Style only that heading
- Make sure no other element uses that id
What You Will Learn Next
In the next lesson, you will learn how to group selectors to save time.