10. Combining Selectors: Grouping and Chaining
As your stylesheets grow, you need ways to apply rules efficiently to multiple elements or to target elements based on multiple conditions.
1. Grouping Selectors (The Comma ,)
If you want the exact same styles to apply to several different selectors, you can group them using a comma.
css /* Applying the same font to all headings */ h1, h2, h3, h4 { font-family: Georgia, serif; color: #1a1a1a; }
/* Applying a reset to several common elements */ input[type="text"], textarea, select { border: 1px solid #ccc; padding: 5px; }
Grouping significantly reduces repetition in your CSS.
2. Chaining Selectors (No Space)
Chaining means combining multiple selectors without a space between them to target an element that meets all criteria.
Example: Targeting a specific tag with a specific class:
html
This is featured.
css /* Targets ONLY
elements that also have the class 'featured' */ p.featured { font-weight: bold; background-color: lightyellow; }
/* Targets ANY element with the class 'featured' */ .featured { border: 1px dashed gray; }
Example: Targeting multiple classes:
html
css /* Targets ONLY elements that have BOTH the 'btn' AND 'primary' classes */ .btn.primary { background: blue; color: white; }