Mastering CSS selectors is the foundation of writing efficient, maintainable stylesheets without styling conflicts.
1. Primary Selector Types
⊞Code Example
/* 1. Universal reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. Element selector */
p {
color: #94a3b8;
}
/* 3. Class selector (Reusable) */
.btn-primary {
background-color: #04AA6D;
color: #ffffff;
padding: 10px 20px;
border-radius: 8px;
}
/* 4. ID selector (Unique) */
#main-navigation {
background-color: #0c1328;
}
2. Grouping Selectors
If multiple selectors share identical styles, separate them with commas to eliminate duplicated code:
⊞Code Example
h1, h2, h3, h4 {
font-family: 'Inter', sans-serif;
color: #ffffff;
letter-spacing: -0.02em;
}