Find Me If You Can
To apply a style, the browser needs to find an element in the DOM tree. The efficiency and cleanliness of your CSS depend on how skillfully you use basic selectors.
1. Universal Selector (*)
Selects all elements without exception.
* { box-sizing: border-box; }
Be careful: abusing * can slow page rendering on weak devices, as the browser has to process absolutely every tag.
2. Type (Tag) Selector
Targets all elements of a specific type (div, p, section).
- When to use: For global base styles (e.g., setting line spacing for all paragraphs).
3. Class Selector (.) — Main Tool
Starts with a period. This is the most flexible method. One class can be given to many elements, and one element can have many classes.
.btn { border-radius: 4px; }
.btn-primary { background: blue; }
In HTML: <button class="btn btn-primary">Buy</button>
4. ID Selector (#)
Selects an element with the unique id attribute.
In professional layout, IDs are almost never used for styles. Why? Because they have huge specificity that's hard to override later. Use IDs only for anchors or JS.
5. Group Selector (,)
Allows applying the same styles to different selectors.
h1, h2, .main-title { font-weight: 900; }