10 Things You Need to Know About Computing Discounted Prices in CSS

CSS has evolved far beyond simple layout and styling—it now handles complex calculations and dynamic content display. One practical example is computing and showing discounted prices directly in the browser without a single line of JavaScript. By combining CSS custom properties, calc(), and advanced selectors like :has(), you can create interactive pricing components. Below are ten essential insights into how this works, from data storage to browser considerations.

1. What We're Building – A Student Discount Calculator

The demo features a list of streaming services (Netflix, Disney+, HBO, etc.). Each service shows its full price and an optional student discount toggle. When the user checks the discount box, the price updates dynamically—the original amount gets a strikethrough, and a new discounted price appears. All logic lives in CSS, relying on data stored in HTML attributes and state changes from checkboxes.

2. The Power of CSS Custom Properties and calc()

Custom properties (e.g., --n) let you store numeric values and use them with calc(). In our case, --n: calc(attr(data-price) * (1 - attr(data-discount))) would compute the sale price. However, attr() currently only returns strings for content property, so we need a workaround—but the concept illustrates CSS’s growing math capabilities.

3. Storing Data in HTML with data-* Attributes

Each price element carries data-price (e.g., 7.99) and data-discount (e.g., 0.2 for 20% off). These attributes hold the raw numbers needed for calculation. Using descriptive names keeps the markup semantic and accessible to CSS or JavaScript if needed later.

4. Using the :has() Selector to Toggle Discounts

The :has() pseudo-class checks if a parent contains a checked checkbox. When .ott:has(.is-ott-discounted:checked) matches, we apply discount styles. This selector acts like a conditional in CSS, enabling interaction without JavaScript. It's a modern addition with good browser support.

5. Striking Through the Original Price

When the discount toggle is active, the original price gets text-decoration: line-through. This visual cue clearly signals that the displayed amount is no longer the final price. It’s a simple yet effective way to show the discount.

6. Calculating the Discounted Price with attr() (and Its Limits)

Ideally, we’d use attr() in calc() like calc(attr(data-price) * (1 - attr(data-discount))). But currently, attr() only works in the content property. Until full support arrives, developers must copy the values into custom properties or use a preprocessor. The demo shows the intended future syntax.

7. A Closer Look at the attr() Function in CSS

The CSS attr() function is being extended to return numeric, color, and length values. Once implemented, it will allow direct use in calc(), making the discount calculation completely pure CSS. This feature is part of CSS Values Level 5 and is already in experimental builds.

8. Leveraging :checked Pseudo-Class for Interaction

The discount toggle uses input[type="checkbox"]:checked to trigger the discount. This is the simplest way to create state-dependent styles without JavaScript. Combined with :has(), you can react to nested elements and build complex UI interactions.

9. Browser Support and Progressive Enhancement

Currently, :has() is supported in major browsers (Chrome 105+, Safari 15.4+, Firefox 121+). However, attr() for calculations is not yet widespread. A practical approach is to build the component as a progressive enhancement—start with static prices and let CSS enhance the experience where supported.

10. Real-World Applications and Future Potential

Beyond e-commerce, CSS math can power progress bars, countdowns, and dynamic visualizations. As browser support matures, developers will rely less on JavaScript for simple calculations, leading to faster, more accessible pages. The discount example is a glimpse into a more declarative future for web interfaces.

CSS is no longer just a styling tool—it's becoming a full-fledged language for UI logic. By mastering custom properties, calc(), and modern selectors, you can create interactive components like discounted price displays without JavaScript. While some features still need time, experimenting now prepares you for tomorrow's web.