Project 29: E-commerce Cart
CSS Stylist
Builds on these lessons
Step 1 of 2
Project
Scoping Styles with @scope
Wrap the cart's rules in @scope (.cart-widget) { .item { ... } }. Everything inside only applies within .cart-widget — the same isolation problem CSS Modules, styled-components, and Shadow DOM each solve with build tooling or JS, now available as a native CSS feature.
🎯 Your Task
Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!
@scope (.cart-widget) {
.item {
display: flex;
justify-content: space-between;
padding: 12px 0;
}
}