A single rule can target multiple selectors at once by separating them with commas, applying the exact same declaration block to every element matched by any of those selectors, which avoids repeating identical declarations across several separate rules. When multiple rules in a stylesheet target the same element with the same property, CSS resolves the conflict using specificity first, more specific selectors win regardless of their order in the file, and then, among equally specific rules, source order, with the rule appearing later in the stylesheet winning.
1Understanding CSS Rules
A single rule can target multiple selectors at once by separating them with commas, applying the exact same declaration block to every element matched by any of those selectors, which avoids repeating identical declarations across several separate rules. When multiple rules in a stylesheet target the same element with the same property, CSS resolves the conflict using specificity first, more specific selectors win regardless of their order in the file, and then, among equally specific rules, source order, with the rule appearing later in the stylesheet winning.
Group selectors with a comma, h1, h2, h3 { margin-top: 0; }, whenever several different selectors need the exact identical declaration block — it avoids repeating the same declarations across multiple separate rules, and keeps them easier to update together.
h1, h2, h3 {
font-family: Georgia, serif;
margin-top: 0;
}2Practical Example
Here is a real-world application of CSS Rules showing how it is used in production CSS code.
.box { color: blue; }
.box { color: green; }
<div class="box">Text</div>3Best Practices
Follow these guidelines when working with CSS Rules:
1. Group selectors with commas when several of them need identical declarations, rather than repeating the same declaration block in multiple separate rules
2. Remember specificity, not just source order, determines which conflicting rule wins — a highly specific rule earlier in the file can still beat a less specific one written later
3. Order equally-specific, conflicting rules deliberately, since among rules of the same specificity, the one appearing later in the stylesheet wins
Tip: Group selectors with a comma, h1, h2, h3 { margin-top: 0; }, whenever several different selectors need the exact identical declaration block — it avoids repeating the same declarations across multiple separate rules, and keeps them easier to update together.
h1, h2, h3 {
font-family: Georgia, serif;
margin-top: 0;
}