CSS
🎯 CSS Selectors
CSS selectors are one of the most important parts of CSS.
They are used to target specific HTML elements and apply styles to them.
In simple terms, selectors tell the browser: “Which HTML elements should receive these styles?”
📘 Basic Example
CSS
p {
color: red;
}
🔍 Explanation:
This selector targets all <p> elements and changes their text color to red.
📚 Common Types of CSS Selectors
| Selector Type | Syntax | Description |
|---|---|---|
| Universal Selector | * | Selects all HTML elements |
| Element Selector | p, div, h1, | Selects a specific HTML tag |
| ID Selector | #id | Selects an element with a specific ID |
| Class Selector | .class | Selects elements with a specific class |
| Child Selector | A > B | Selects direct child elements |
| Descendant Selector | A B | Selects all matching elements inside another element |
| Adjacent Sibling Selector | A + B | Selects the element immediately after another |
| General Sibling Selector | A ~ B | Selects all sibling elements |
| Multiple Selector | A, B | Selects multiple elements at once |
| Attribute Selector | [attribute] | Selects elements with a specific attribute |
🧠 Quick Summary
- CSS selectors determine which HTML elements receive styles
- Different selectors provide different targeting methods
- Selectors help write cleaner and more flexible CSS
- Classes and IDs are among the most commonly used selectors
- Attribute selectors allow advanced targeting options