CSS · Chapter 4 of 44
CSS Selectors
Selectors determine which HTML elements a CSS rule applies to. Common types include element selectors, class selectors (.name), and ID selectors (#name).
You can also combine selectors to target elements more precisely, such as descendant or grouped selectors.
Syntax
.classname { }
#idname { }
element { }Element, class, and ID selectors
Element selectors match tag names (p). Class selectors match the class attribute (.box). ID selectors match a unique id (#header).
Grouping selectors
Separate multiple selectors with commas to apply the same styles to several elements at once.
Example 1 (css)
.highlight {
background: yellow;
}
#main-title {
font-size: 32px;
}Output
Elements with class 'highlight' get yellow background; the #main-title element gets large textClass selectors start with a dot, ID selectors with a hash.
Key points
- Element selectors target tag names directly.
- Class selectors start with a dot and can be reused.
- ID selectors start with # and should be unique per page.
- Commas group multiple selectors together.
💡 Note: Use classes for reusable styles; reserve IDs for unique, single elements.