Element, Class, ID and Universal Selectors
CSS selectors determine which elements receive declarations. The universal selector * matches every element. Type selectors target HTML elements, class selectors target elements with a class, and ID selectors target a specific ID.
Classes are generally preferred for reusable styling. IDs have high specificity and are better reserved for unique document identities or application hooks when appropriate.
Basic Selector Matching
Basic Selectors
* {
box-sizing: border-box;
}
p {
color: #334155;
}
.card {
padding: 1rem;
}
#main-header {
min-height: 64px;
}💡 These selectors target all elements, paragraphs, elements with the
card class, and the element with a specific ID.Key Takeaways
- Classes are the primary reusable styling hook.
- IDs have higher specificity than classes and element selectors.
Knowledge Check
Which selector targets elements with the class `card`?