CSS · Exercise 5 of 5 Previous
Intermediate
Pricing cards with :has(), :not() and pseudo-elements
Finish the pricing cards without changing the HTML:
1. The card that contains a .badge gets a 2px solid gold border (the others keep a grey one). Use :has(), not a new class.
2. Every price shows a ₹ sign before the number, added with CSS.
3. Every feature item except the last in each list has a 1px solid bottom border.
4. The feature list bullets (markers) are seagreen.
What Check tests
- The card with a badge has a gold border
- The card without a badge keeps its grey border
- The featured card is chosen with :has(), not a new class
- Prices show ₹ before the number
- All feature items except the last have a bottom border
- Feature markers are seagreen
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.