Class selector
The class selector matches any element carrying the given class name.
Syntax
.classname { }Examples
.btn { padding: 0.5rem 1rem; }
.btn.is-primary { background: royalblue; color: white; }
Output
Styles all .btn elements and applies extra styling to those also having .is-primary.
Notes
Specificity is 0,1,0. Chaining selectors with no space (.btn.is-primary) requires both classes on the same element. Classes are the recommended primary styling hook for reusability.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |